在反应导航 5.x 中禁用导航回登录/注册屏幕

Posted 2023-03-15

【中文标题】在反应导航 5.x 中禁用导航回登录/注册屏幕

【英文标题】：Disable navigating back to Login/Signup screen in react navigation 5.x

【发布时间】：2020-03-22 13:50:10

【问题描述】：

我正在使用 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。

那么，我该如何解决呢？

【参考方案1】：

在您的主屏幕中使用以下代码：

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

【讨论】：

如果我不想出现任何警报，只需阻止用户返回在这种情况下我应该怎么做？我正在尝试添加导航，goBack(null);而不是 onBackPress alert 但不起作用！

我们如何在 React Navigation 5 中的 Routerflux 场景下处理根堆栈本身以供全局使用。 if(Actions.currentscene === home || dashboard) === 提示退出应用，否则 Actions.pop()