如何在 react-native 中的 createStackNavigator 組件中訪問導航道具

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 中訪問導航道具。 有2種方式

1. 您可以升級到react-navigation-v5，因為 api 更好，您可以在構建導航器時訪問 props 或 state。

2. 在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>
    ))
  }