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