我有一个签名屏幕组件,我想在用户未登录时默认显示它。登录后,我想重定向到主页。
以下是createStackNavigator
设置:
const MainStack = createStackNavigator(
{
Home: { screen: TabStack },
User: { screen: UserProfile },
Login: {screen: SignIn },// Want to access navigation prop in this component
Post: { screen: Post },
},
{
initialRouteName: 'Login',
mode: 'modal',
headerMode: 'none'
}
)
我正在主要组件 App.tsx
中使用Graphql和react-apolloclass App extends React.Component<any,any> {
render() {
return (<ApolloProvider client={client}>
<RootWithSession/>
</ApolloProvider>)
}
}
我想访问SignIn
组件中的访问导航道具该怎么做?
答案 0 :(得分:0)
简短的回答,您无法在createStackNavigator中访问导航道具。有两种方法
您可以升级到react-navigation-v5,因为api更好,并且在构建导航器时可以访问道具或状态。
在SignIn
组件内添加一些逻辑以导航至HomePage
或其他内容
答案 1 :(得分:0)
我能够通过创建两个单独的导航堆栈来访问Navigation对象。一个用于登录路由,另一个用于登录路由:
const MainStack = createStackNavigator(
{
Home: { screen: TabStack },
User: { screen: UserProfile },
Comments: { screen: Comments },
Post: { screen: Post }
},
{
initialRouteName: 'Home',
mode: 'modal',
headerMode: 'none'
}
)
const LoginStack = createStackNavigator(
{
Auth: { screen: SignIn }
},
{
initialRouteName: 'Auth',
mode: 'modal',
headerMode: 'none'
}
)
const AppContainer = createAppContainer(MainStack);
const LoginContainer = createAppContainer(LoginStack);
在渲染方法中,我使用了screenProps
来提供导航道具:
render() {
console.log(this.state.userId)
return (this.state.isLoggedIn?(<ApolloProvider client={client}>
<AppContainer screenProps={{client,onLogout:this.onLogOut,loginId:this.state.userId}}/>
</ApolloProvider>)
:(
<ApolloProvider client={client}>
<LoginContainer screenProps={{client,onLogin:this.onLogin,loginId:this.state.userId}} />
</ApolloProvider>
))
}