时间戳

首页 > 解决方案 > 在反应导航 5.x 中禁用导航回登录/注册屏幕

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

问题描述

我正在使用反应导航 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 中成功登录/注册后导航回来

应用程序.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。

那么，我该如何解决呢？

标签： react-nativereact-navigation-v5

解决方案

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

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 导航文档

推荐阅读