javascript - React Navigation 如何传递到 Tab navigator form Login Screen？

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

这怎么可能。它的架构是什么？

标签： javascriptreactjsreact-native

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