接着前两篇文章，我们继续往下学习。页面之间传递参数无论是在App中还是网站、小程序中都是非常重要的。
然而各种技术的传参方式也稍有不同。那么RN中的页面传参都有哪几种方式呢？
一、是在App.js中，将页面写入页面栈时传的初始参数。
<Stack.Screen name="首页" component={
HomeScreen} initialParams={
{
cscs:'123'}} />
initialParams={
{cscs:‘123’}}就是首页页面初始化时的参数。你可以在HomeScreen页面打印this.props进行查看参数。
二、页面跳转进行传参。
this.props.navigation.navigate('用户列表',{
cs1:'cs1',
cs2:'cs2'
})
这是从HomeScreen页面跳转到UserList页面时，进行传的参数 cs1,cs2 。
参数就写在栈名后面。
接着在UseList页面打印一下this.props 就可以获得参数。
三、页面参数更新setParams。
setParams() 方法可以更新 route.params 当前屏幕的参数。setParams就像setState() 一样 。将提供的params对象与当前params合并。
基本用法：
function ProfileScreen({
navigation: {
setParams } }) {
render() {
return (
<Button
onPress={
() =>
setParams({
friends:
route.params.friends[0] === 'Brent'
? ['Wojciech', 'Szymon', 'Jakub']
: ['Brent', 'Satya', 'Michaś'],
title:
route.params.title === "Brent's Profile"
? "Lucy's Profile"
: "Brent's Profile",
})
}
title="Swap title and friends"
/>
);
}
}
四、将参数传递给嵌套导航器中的屏幕。
navigation.navigate('Root', {
screen: 'Settings',
params: {
user: 'jane' },
});
如果导航器已经渲染，则在使用堆栈导航器的情况下导航到另一个屏幕将推送一个新屏幕。
对于深层嵌套的屏幕，你可以遵循类似的方法。请注意，navigate这里的第二个参数是params，因此你可以执行以下操作：
navigation.navigate('Root', {
screen: 'Settings',
params: {
screen: 'Sound',
params: {
screen: 'Media',
},
},
});
最后一种参数传递暂时没有示例用到，如有用到，后续补充。
有问题可以留言，一起讨论解决~