React Navigation 如何傳遞到 Tab 導航器表單登錄屏幕？

Question

我有一個路由器類。 而且，我有一個登錄屏幕。 登錄屏幕后，我想通過選項卡導航器頁面。

這是我的登錄頁面

<Login.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Login.Screen name="Initial" component={Initial} />
</Login.Navigator>;

這是我的 app.js

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator
          tabBarOptions={{
            activeBackgroundColor: "#212A39",
            inactiveBackgroundColor: "#212A39"
          }}
          initialRouteName={"MainMenuTab"}
        >
          <Tab.Screen
            name="MessagesTab"
            component={MessagesStackScreen}
            options={{
              tabBarLabel: ({ focused, color }) => (
                <TabLabel title={"messages"} focused={focused} />
              ),
              tabBarIcon: ({ focused, color, size }) => (
                <TabIcon
                  images={"messages"}
                  focused={focused}
                  iconName={"messages"}
                />
              )
            }}
          />
          <Tab.Screen
            name="MainMenuTab"
            component={MainMenuStackScreen}
            options={{
              tabBarLabel: ({ focused, color }) => (
                <TabLabel title={"Home"} focused={focused} />
              ),
              tabBarIcon: ({ focused, color, size }) => (
                <TabIcon
                  images={"mainMenu"}
                  focused={focused}
                  iconName={"mainMenu"}
                />
              )
            }}
          />
          <Tab.Screen
            name="ProfileTab"
            component={ProfileStackScreen}
            options={{
              tabBarLabel: ({ focused, color }) => (
                <TabLabel title={"messages"} focused={focused} />
              ),
              tabBarIcon: ({ focused, color, size }) => (
                <TabIcon
                  images={"profile"}
                  focused={focused}
                  iconName={"profile"}
                />
              )
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
}

這怎么可能。 它的架構是什么？

Answer 1

你可以這樣使用

<NavigationContainer>
     <Stack.Navigator>
       {Store.userToken == null ? (
         <Stack.Screen name="Login" component={LoginStackScreen} options={{ headerShown: false }} />
       ) : (
           <Stack.Screen name="MainTabNavigator" component={MainTabNavigator} options={{ headerShown: false }} />)}
     </Stack.Navigator>
</NavigationContainer>

然后你必須創建堆棧

function LoginStackScreen() {
  return (
    <LoginStack.Navigator initialRouteName={"Initial"}>
      <LoginStack.Screen name="Initial" component={Initial} options={{ headerShown: false }} />
    </LoginStack.Navigator>
  );
}

Answer 2

你應該使用開關導航器

我就是這么用的；

const InitialNavigator = createSwitchNavigator(
{
  Login: LoginPage, // imported login page
  App: BottomTabNavigator //created by createBottomTabNavigator()
});

export default createAppContainer(InitialNavigator);

當您的登錄過程成功時，像這樣導航到應用程序；

this.props.navigation.navigate('App',{user: loggedInUser}); // user is navigation prop