啥都不说了 先来效果图
看下入门文档
https://reactnavigation.org/docs/intro/
里面有三个导航器
然后上代码
index.android.js
- import React from 'react';
- import {
- AppRegistry,Text,View,Button,} from 'react-native';
- //导入stack导航组件
- import {StackNavigator} from 'react-navigation';
- import ChatScreen from './ChatScreen'
- class HomeScreen extends React.Component {
- static navigationOptions = {
- title: 'Welcome',//标题
- };
-
- render() {
- const { navigate } = this.props.navigation;
- return (
- <View>
- <Text>Hello,Chat App!</Text>
- <Button
- onPress={() => navigate('Chat')}
- title="Chat with Lucy"
- />
- </View>
- );
- }
- }
- //导航注册
- const SimpleApp = StackNavigator({
- Home: {screen: HomeScreen},Chat: { screen: ChatScreen },//新添加的页面
- });
-
- AppRegistry.registerComponent('second',() => SimpleApp);
第二个页面
- /** * Created by liuml on 2017/9/18. */
-
- import React from 'react';
- import {
- AppRegistry,} from 'react-native';
- import {StackNavigator} from 'react-navigation';
- class ChatScreen extends React.Component {
- static navigationOptions = {
- title: 'Chat with Lucy',};
-
- render() {
- const {navigate} = this.props.navigation;
- return (
- <View>
- <Text>Chat with Lucy</Text>
- <Button
- onPress={() => navigate('Chat')}
- title="Chat with Lucy"
- />
- </View>
-
- );
- }
- }
-
- module.exports = ChatScreen;
可以看到 主要用了navigate 来跳转的
但是也得先注册
如何隐藏导航条 使用自己的
http://blog.csdn.net/u011690583/article/details/70333972
这个说的不错