Mam klasę routera. Mam też ekran logowania. Po ekranie logowania chcę przejść do strony nawigatora kart.

To jest moja strona logowania

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

To jest mój 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>
    );
  }
}

Jak to możliwe. Co to za architektura?

2
Seçkin Özdemir 20 marzec 2020, 14:36

2 odpowiedzi

Najlepsza odpowiedź

Możesz używać w ten sposób

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

A potem musisz stworzyć stos

function LoginStackScreen() {
  return (
    <LoginStack.Navigator initialRouteName={"Initial"}>
      <LoginStack.Screen name="Initial" component={Initial} options={{ headerShown: false }} />
    </LoginStack.Navigator>
  );
}
1
Kadir Yaka 21 marzec 2020, 13:05

Powinieneś użyć nawigatora przełączników

Używam tego w ten sposób;

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

export default createAppContainer(InitialNavigator);

A kiedy proces logowania się powiedzie, przejdź do takiej aplikacji;

this.props.navigation.navigate('App',{user: loggedInUser}); // user is navigation prop
0
Cem Kocagöz 20 marzec 2020, 14:09