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

【问题标题】：How to access navigation prop in createStackNavigator component in react-native如何在 react-native 中访问 createStackNavigator 组件中的导航道具
【发布时间】：2020-03-09 17:59:47
【问题描述】：

我有一个签名屏幕组件，我想在用户未登录时默认显示它。登录后我想重定向到主页。以下是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 组件中的访问导航属性怎么做？

【问题讨论】：

你需要有一个父组件来为你存储状态。将 handleLogin 属性从父组件传递到登录界面（子组件）。当用户登录时调用 this.props.handleLogin ，它将更新父组件中的 isLoggedin Prop。渲染时可以检查 isLoggedin 是否为真。
@GregM 我的问题是导航道具。当我的登录组件中没有导航道具时，如何重定向到主页。

标签： reactjs asp.net-mvc react-native react-navigation react-navigation-stack

【解决方案1】：

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

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

【讨论】：

我可以使用 react navigation v5 但不知道如何与react-apollo集成

【解决方案2】：

我能够通过创建两个单独的导航堆栈来访问导航对象。一个用于登录路由，另一个用于登录路由，如下所示：

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>
    ))
  }

【讨论】：