React Navigation 入门(二)
来源:互联网 发布:windows 关闭系统还原 编辑:程序博客网 时间:2024/06/06 02:54
RN 版本:0.50
操作环境:Windows 10
React Navigation 版本:1.0.0-beta.20文章同步自简书:http://www.jianshu.com/p/acf137a41c7b
在上一篇文章《StackNavigator 快速入门》中,介绍了 StackNavigator 的快速使用方法,本篇在其基础上进行补充,对 StackNavigator 进行更加详细的介绍。
StackNavigator 的介绍
我们依然是先写个首页用来展示:
export default class HomeScreen extends Component { static navigationOptions = { title: 'Welcome' } render() { return <Text>Hello, Chat App!</Text>; }}
然后通过 StackNavigator 进行注册:
const RootNavigator = StackNavigator({ Home: { screen: HomeScreen, }});
可以发现,这里设置 title 的方式和上一篇不一样了。上一篇中,我们在对 HomeScreen 进行注册的时候进行了 headerTitle
的设置,就像下面这样。
const RootNavigator = StackNavigator({ Home: { screen: HomeScreen, navigationOptions: { headerTitle: 'Home' } });
而在这篇文章中,我们把 navigationOptions
单独拿了出来写成了一个静态变量。这种写法也是可以的,当通过 StackNavigator
加载到 Home
页面的时候,会自动找到这个变量读取它的各个参数并应用在 Home
页面上。就像组件的生命周期刚开始的时候会先读取 static defaultProps
中的默认属性。
另外在这里 headerTitle
与 title
的效果是一样的,都是顶部 ‘ToolBar’ 的标题。它们两个具体有什么区别,打算在下一篇文章再做介绍。效果图直接用官网的。
添加一个新的页面
这个在上一篇文章也已经说过了,如果你看过上一篇文章,这里随便看看就好了。
我们新建一个 ChatScreen
页面:
export default class ChatScreen extends Component { static navigationOptions = { title: 'Chat with Lucy', } render() { return ( <View> <Text>Chat with Lucy</Text> </View> ); }}
然后在 HomeScreen
中添加一个按钮使其被点击的时候能跳转到 ChatScreen
。这里我们就要用到 navigate
方法并且给它填入正确的 routeName
参数,我们这里定义的是 Chat
。
export default class HomeScreen extends 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> }}
当然了,最最重要的不要忘记了在 StackNavigator
中进行注册:
const RootNavigator = StackNavigator({ Home: {screen: HomeScreen}, Chat: {screen: ChatScreen}});
现在,我们点击按钮就可以进行页面之间的切换了。
传递参数
任何页面之间的切换都避免不了参数的传递。还记得 navigate(routeName, params, action)
方法的第二个参数吗?params
就是要传递的参数。
render() { const {navigate} = this.props.navigation; return <View> <Text>Hello, Chat App!</Text> <Button onPress={() => navigate('Chat', {user: 'Lucy'})} title="Chat with Lucy" /> </View> }
这里我们给 ChatScreen
传递了一个值为 ‘Lucy’ 的字符串 user
,然后就可以通过 this.props.navigation.state.params
来取到你想要的参数。
export default class ChatScreen extends Component { // Nav options can be defined as a function of the screen's props: // Nav options 可以被定义成一个页面属性的函数(原谅我英语太差) // 格式就像下面这样,你就可以取到 navigation 了 static navigationOptions = ({navigation}) => ({ title: `Chat with ${navigation.state.params.user}`, }); render() { // The screen's current route is passed in to `props.navigation.state`: // 屏幕当前的路由被传递给了 `props.navigation.state` const {params} = this.props.navigation.state; return ( <View> <Text>Chat with {params.user}</Text> </View> ); }}
你可以改一下 user
的值,然后看看有什么变化。
本文到此结束,下一篇打算详细写写 StackNavigator
的各个属性。
- React Navigation 入门(二)
- React Navigation 入门(一)
- React Navigation 入门(三)
- React Navigation 入门(四)
- react入门(二)
- (三)React Native中Navigation组件的快速入门
- React Native入门(九)之导航组件React Navigation(1)StackNavigator
- React Native入门(十)之导航组件React Navigation(2)TabNavigator和DrawerNavigator
- React Native 入门(二)
- react-navigation使用及dva初探二
- react-navigation Navigation使用
- react-navigation
- react-navigation
- react-navigation
- react-navigation
- React Native基础与入门(二)--初识React Native
- React Native --react-navigation
- React Native react-navigation
- 关于shrio在web校验权限时你所要知道的
- 环境搭建-CentOS集群搭建
- Oracle中trunc函数、round 函数、ceil函数和floor函数的使用
- 那些天纠结的BUG
- Oracle的REDO和UNDO
- React Navigation 入门(二)
- 当物联网成为主导后,产品经理将何去何从
- [TensorFlow学习手记] 2
- c++中几个需要注意的点
- NYOJ 硬币找零
- js网站国际化,多国语言切换【详解】
- Maximum Length of Repeated Subarray
- 理解和配置 Linux 下的 OOM Killer
- sourceTree 添加 ssh key 方法