将参数从 Stack-navigator 传递到选项卡 Navigator (react-navigation 5)
Passing Params from Stack-navigator to tab Navigator (react-navigation 5)
我正在尝试将用户 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>
)
每当我从登录屏幕转到主页并调用 this.props.navigation.getParam('id') 时,我都会收到一条错误消息,提示它不是一个函数。仔细检查后,我发现 this.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 组件。
任何帮助将不胜感激!!
试试这个:
props.navigation.navigate('mainStack' { params: {id: 'myId'}, screen: 'Home' )
并且在访问而不是使用 getParam
时使用 props.route.params.id
我正在尝试将用户 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>
)
每当我从登录屏幕转到主页并调用 this.props.navigation.getParam('id') 时,我都会收到一条错误消息,提示它不是一个函数。仔细检查后,我发现 this.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 组件。
任何帮助将不胜感激!!
试试这个:
props.navigation.navigate('mainStack' { params: {id: 'myId'}, screen: 'Home' )
并且在访问而不是使用 getParam
时使用 props.route.params.id