写作时间:2020/4/11
React-Native版本:0.62
React-Navigation版本:5.X
参数传递其实没啥需要多讲的,就是固定的格式。本文介绍两种情况下的参数传递
1 在同一个Stack内两个组件的参数传递
2 点击不同的Tab将数据传递给对应的首页
情况1
组件间的跳转通过navigate函数实现,该函数除了可以实现跳转之外,还能够携带参数,代码片段如下
<Button
title="点击获取信息"
onPress={() => {
this.props.navigation.navigate('InfoPage', {post: this.props.extraData.id});
}}
/>
其中post就是可以传递的参数。相应的,另一个组件接收参数的方法如下
this.props.route.params.post
不难看出,参数存储在了route.params当中。
情况2
当使用bottom-tab时,点击不同的tab需要传递不同的参数给对应页面,实现方法如下
<Tab.Navigator>
<Tab.Screen name="tab_0">{(props) => <HomePage {...props} extraData={{id: 0}} />}</Tab.Screen>
<Tab.Screen name="tab_1">{(props) => <HomePage {...props} extraData={{id: 1}} />}</Tab.Screen>
<Tab.Screen name="tab_2">{(props) => <HomePage {...props} extraData={{id: 2}} />}</Tab.Screen>
</Tab.Navigator>
其中id就是需要传递的参数。相应的,参数接收方法如下
this.props.extraData.id
可以看出,参数存储在了props中。