我正在使用 React Navigation 5
我的结构是这样的:
ROOT (STACK)
|-- LoginStack (STACK)
| |-- Login (SCREEN) -> when successful navigate to "Mainapp_stack"
| +-- Register (SCREEN) -> after registration, navigate to "Mainapp_stack"
|
+-- Mainapp_stack (STACK)
|-- Dashboard (SCREEN)
|-- MyProfile (SCREEN)
通过检查 usertoken 可以导航到主应用程序堆栈，但是，
在react-navigation 5.x中登录/注册过程的第一次，如何防止用户在成功登录/注册后导航回来
App.js
<NavigationContainer>
<Stack.Navigator>
{this.state.token_available ?
<Stack.Screen
name="Mainapp_stack"
component={Mainapp_stack}
options={{headerShown: false}}
/>
:
<>
<Stack.Screen
name="TeacherLogin"
component={TeacherLogin}
/>
<Stack.Screen
name="Info"
component={Info}
/>
<Stack.Screen
name="Mainapp_stack"
component={Mainapp_stack}
/>
</>
}
</Stack.Navigator>
</NavigationContainer>
Mainapp_stack.js
<Stack.Navigator initialRouteName='Dashboard'>
<Stack.Screen
name="Dashboard"
component={Dashboard}
// options={{headerShown: true}}
/>
</Stack.Navigator>
现在，当我完成登录/注册时，如果按硬件后退按钮，我不想导航回来。我的变量 token_available 位于 App.js 中，并且我没有使用 redux。
那么，我该如何解决呢？
最佳答案
在主屏幕中使用以下代码:
import { useFocusEffect } from "@react-navigation/native";
useFocusEffect(
React.useCallback(() => {
const onBackPress = () => {
Alert.alert("Hold on!", "Are you sure you want to Exit?", [
{
text: "Cancel",
onPress: () => null,
style: "cancel"
},
{ text: "YES", onPress: () => BackHandler.exitApp() }
]);
return true;
};
BackHandler.addEventListener("hardwareBackPress", onBackPress);
return () =>
BackHandler.removeEventListener("hardwareBackPress", onBackPress);
}, []));
在此处了解更多信息:React navigation documents
关于react-native - 在 react 导航 5.x 中禁用导航回登录/注册屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60800143/