react-navigation(5.x)新版本使用（三）之参数传递

写作时间：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中。