啥都不说了 先来效果图
看下入门文档
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 来跳转的
但是也得先注册
//导航注册
const SimpleApp = StackNavigator({
Home: {screen: HomeScreen},//新添加的页面
});
如何隐藏导航条 使用自己的
http://blog.csdn.net/u011690583/article/details/70333972
这个说的不错
原文地址:https://www.jb51.cc/react/302791.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。