[英]Stack navigation in react native
To create my app I followed some tutorials and I created this Stack navigator:为了创建我的应用程序,我遵循了一些教程,并创建了这个 Stack navigator:
const AppStack = createStackNavigator();
const [user] =useContext(UserContext)
return (
<AppStack.Navigator headerMode="none">
{user.isLoggedIn === null ? (
<AppStack.Screen name="Loading" component={LoadingScreen} />
) : user.isLoggedIn ? (
<AppStack.Screen name="Main" component={MainStackScreen} />
) : (
<AppStack.Screen name="Auth" component={AuthStackScreen} />
)
}
</AppStack.Navigator>
);
LoadingScreen will appear just the first seconds LoadingScreen 将出现在前几秒
MainStackScreen is another screen in which I have a bottom tab navigator with the main screen MainStackScreen 是另一个屏幕,其中我有一个带有主屏幕的底部选项卡导航器
const MainStack = createBottomTabNavigator()
<MainStack.Navigator tabBarOptions={tabBarOptions} screenOptions={screenOptions}>
<MainStack.Screen name="Exercises" component={**ExercisesScreen**} />
<MainStack.Screen name="Measurements" component={MeasurementsScreen} />
<MainStack.Screen name="Workout" component={MeasurementsScreen} />
<MainStack.Screen name="Progresses" component={ProgressesScreen} />
<MainStack.Screen name="Profile" component={ProfileScreen} />
</MainStack.Navigator>
AuthStackScreen is another screen in which I have another stack navigator that contains the signup and the signin screens AuthStackScreen 是另一个屏幕,其中我有另一个包含注册和登录屏幕的堆栈导航器
const AuthStack = createStackNavigator()
return (
<AuthStack.Navigator headerMode="none">
<AuthStack.Screen name="SignIn" component={SignInScreen}/>
<AuthStack.Screen name="SignUp" component={SignUpScreen}/>
</AuthStack.Navigator>
);
But what if I want to create other screens to navigate in from ExercisesScreen or another screen?但是,如果我想创建其他屏幕以从ExperimentsScreen或其他屏幕导航怎么办? I need to create another navigator to handle them but I don't know how to insert it in these navigations that I created.
我需要创建另一个导航器来处理它们,但我不知道如何将它插入到我创建的这些导航中。
I solved it like this, in the Main navigator I replaced ExercisesScreen with FirstScreenNavigator我这样解决了,在主导航器中,我用 FirstScreenNavigator 替换了 ExperimentsScreen
<MainStack.Screen name="Exercises" component={FirstScreenNavigator} />
and I Created a FirstScreenNavigator.js that contains我创建了一个 FirstScreenNavigator.js,其中包含
const FirstScreenNavigator = () => {
return(
<Stack.Navigator>
<Stack.Screen
name="Screen1"
component={Screen1}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
/>
</Stack.Navigator>
)
}
export {FirstScreenNavigator}
Now when I open the ExercisesScreen on the BottomTabNavigator I can easily navigate to the screens that I add into FirstScreenNavigator.js.现在,当我打开 BottomTabNavigator 上的 ExercisesScreen 时,我可以轻松导航到我添加到 FirstScreenNavigator.js 中的屏幕。
Many thanks to Bas Van Der Linden for the suggestions非常感谢 Bas Van Der Linden 的建议
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.