Question

我有一个签名屏幕组件，我想在用户未登录时默认显示它。登录后，我想重定向到主页。以下是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-apollo

class App extends React.Component<any,any> {
render() {

    return (<ApolloProvider client={client}>       
       <RootWithSession/>
    </ApolloProvider>)
  }
}

我想访问SignIn组件中的访问导航道具该怎么做？

Answer 1

简短的回答，您无法在createStackNavigator中访问导航道具。有两种方法

您可以升级到react-navigation-v5，因为api更好，并且在构建导航器时可以访问道具或状态。
在SignIn组件内添加一些逻辑以导航至HomePage或其他内容

Answer 2

我能够通过创建两个单独的导航堆栈来访问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>
    ))
  }

如何在react-native中的createStackNavigator组件中访问导航道具

2 个答案: