将参数从堆栈导航器传递到选项卡导航器(反应导航5)

Question

我正试图将用户ID从登录屏幕传递到主屏幕，主屏幕是嵌套选项卡导航器的一部分。以下是我的应用程序的结构：

const mainStack = () =>(
<Tab.Navigator

tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={Homescreen} 
options = {{headerStyle: {backgroundColor: 'yellow'}}}
/>
<Tab.Screen name="Profile" component={otherStack} />
</Tab.Navigator>
)


export default () => (
<NavigationContainer >
<Stack.Navigator screenOptions={{
headerShown: false
}}>
<Stack.Screen name='Welcome' component={WelcomeScreen} />
<Stack.Screen name = 'Register' component = {RegisterScreen} />
<Stack.Screen name= 'Login' component={LoginScreen} />
<Stack.Screen name = 'mainStack' component={mainStack} />
</Stack.Navigator>

</NavigationContainer>
)

每当我从登录屏幕转到主页并调用这个.props.navigation.getParam('id'(时，我都会收到一个错误，说它不是一个函数。经过仔细检查，我发现这个.props.navigation.state未定义。可能意味着我的参数不会被传递到主屏幕，即使我在导航到它时没有任何问题。

我尝试使用NavigationActions，但我遇到了一个其他地方都没有提到的错误。

我导航到主页如下：

this.props.navigation.navigate('Home' { id: 'myId' })

我也尝试过这种语法：

navigation.navigate('Root', {
screen: 'Settings',
params: { user: 'jane' },
});

但是我得到了相同的错误

同样值得注意的是，我使用了React.component，而不是将屏幕变成函数。我不确定这是否会导致任何问题，因为在react navigation v5的教程中，我看到这家伙使用了函数而不是react组件。

任何帮助都将不胜感激！！

Answer 1

试试这个：

props.navigation.navigate('mainStack' { params: {id: 'myId'}, screen: 'Home' )

当访问而不是使用getParam时，使用props.route.params.id