如何解决在Stack Navigators之间切换React Native Navigation V5
对于具有自己的屏幕的用户,我有两个步骤:
1 。登录,注册和输入代码(确认)。
我有这3个屏幕作为Stack Navigator(代码将在下面)。
2 。主页,问题,类别。
这些屏幕位于不同的Stack Navigator中。
我想要的:
用户完成登录或注册过程后,他们将被发送到“主页”。我想切换堆栈导航器,以使用户无法“返回”到登录屏幕,并且也要清除堆栈。
我尝试过的事情:
我以前曾使用Redux来有条件地使用一个堆栈并在值更改后进行切换,这对于该功能来说似乎又需要太多工作。
我还尝试了嵌套导航器,这显然没有帮助。
这是我的StackNavigators.tsx文件,其中包含所有堆栈导航器:
const Stack = createStackNavigator();
const AuthStack = createStackNavigator();
export const AuthStackNavigator = () => {
return (
<NavigationContainer>
<AuthStack.Navigator>
<AuthStack.Screen name={"Login"} component={Login} options={{
headerTitle: "Login",headerStyle: {backgroundColor: "#eee"},headerTintColor: GlobalStyles.darkColor
}}/>
<AuthStack.Screen name={"Signup"} component={Signup} options={{
headerTitle: "Sign Up",headerTintColor: GlobalStyles.darkColor
}}/>
<AuthStack.Screen name={"EnterCode"} component={EnterMfaCode} options={{
headerTitle: "Enter Code",headerTintColor: GlobalStyles.darkColor
}}/>
</AuthStack.Navigator>
</NavigationContainer>
)
}
export const BaseNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name={"Home"} component={Home} options={{
headerTitle: "Education",headerTintColor: GlobalStyles.darkColor
}}/>
<Stack.Screen name={"Questions"} component={Questions} options={{
headerStyle: {backgroundColor: "#eee"},headerTintColor: GlobalStyles.darkColor,headerTitle: "",gestureEnabled: false,headerBackTitle: "Categories"
}}/>
<Stack.Screen name={"Categories"} component={Categories} options={{
headerStyle: {backgroundColor: "#eee"},headerBackTitle: "Start"
}}/>
</Stack.Navigator>
);
};
如果对如何解决此问题做出解释,我将非常感谢。我很感激时间!
解决方法
我觉得使用Redux是一个很好且直接的解决方案。另一种选择是使用LocalStorage存储一些值,然后从那里获取它。
由于我希望在关闭应用程序后登录用户,因此我发现使用LocalStorage + Redux感觉是一个不错的解决方案。
您可以在本文档中进一步了解如何处理所有内容。 https://reactnavigation.org/docs/auth-flow
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。