android - React Native 中的 BackHandler 不工作

Question

const RootNav = createStackNavigator(
  {
    Splash: {
        screen:Splash
    },
    BeforeLogin: {
        screen:BeforeLogin
    },    
    Signin: {
        screen:Signin,
    },
    Signup: {
        screen:Signup
    },
    Tabs: {
        screen:TabHolder,
    },
    ForgotPassword: {
        screen:ForgotPassword
    },
  } );

下面是我在 BeforeLogin 屏幕中使用的 BackHandler。

  componentWillMount() { 
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton); 
  } 

  componentWillUnmount() { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
  }

  handleBackButton = () => { 
    BackHandler.exitApp(); 
  }

下面是我在 Signin 屏幕和 Signup 屏幕中使用的 BackHandler。

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress',() => {   

      this.props.navigation.navigate('BeforeLogin');
      return true;

    });
  } 

我的 BeforeLogin 屏幕有 2 个按钮。登录和注册，它将我导航到 Signin 和 Signup 屏幕。

现在，我面临两种情况。

场景 1: 我在 BeforeLogin 屏幕上，但我没有导航到 Signin 或 Signup屏幕。现在，当我按下我的 android 后退按钮时，它会关闭应用程序。这就是我想要的，当用户从 BeforeLogin 屏幕按下后退按钮时能够关闭应用程序。

场景 2: 我在 BeforeLogin 屏幕上导航到 Signin 或 Signup 屏幕。现在，当我返回 BeforeLogin 屏幕然后按 android 后退按钮时，应用程序现在没有关闭。

如何解决我的场景 2:？请帮忙。

Answer 1

不要在不必要的情况下使用 backhander，因为它不能在 ios 设备上运行。

使用 this.props.navigation.replace("") 导航

即如果您从 A 导航到 B 并且不想在按下后退按钮时返回到 A，请不要使用 this.props.navigation.navigate("B") 而是使用 this.props.navigation.replace("B")

或

试试 react-navigation@3.0 的新特性 SwitchNavigator。

默认情况下，当按下后退按钮时，应用程序将关闭切换导航器中使用的所有路线屏幕。 因此，在 SwitchNavigator 中定义您要为其退出应用程序的所有屏幕，以及在 StackNavigator 或您使用的任何其他内容中定义所有其他屏幕。