时间戳

首页 > 解决方案 > react-native-router-flux backAndroidHandler 不工作

react-native - react-native-router-flux backAndroidHandler 不工作

问题描述

我正在开发一个我使用过的原生反应移动应用程序react-native-router-flux 我有一个如下场景

1- Screen1
2- Screen2
3- Screen3
4- Screen4

当我在屏幕 4 上按下 android 后退按钮时，它会进入屏幕 3，然后是 2，然后是 1，但是当我在 screen1 上按下 android 后退按钮时，它应该退出应用程序，但它不起作用

这是我的路由器堆栈

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} navBarTintColor={'white'} navBarButtonImageColor={'white'} tintColor={'white'} sceneStyle={styles.routerScene} >
        <Stack key="root">
          <Scene
            key="Screen1"
            component={Screen1}
            animation="fade"
            hideNavBar={true}
            initial={true}
            type='replace'
          />
          <Scene
            key="Screen2"
            component={Screen2}
            animation="fade"
            hideNavBar={true}
            type='replace'
          />
          <Scene
            key="Screen3"
            component={Screen3}
            title="Enrollment"
            animation="slide"
            hideNavBar={false}
            type='replace'
          />
          <Scene
            key="Screen4"
            component={Screen4}
            title="Enrollment"
            animation="slide"
            hideNavBar={false}
            type='replace'
          />

我也尝试使用下面的代码

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

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

  onBackPress() {
        if (backButtonPressedOnceToExit) {
            BackAndroid.exitApp();
        } else {
            if (Actions.currentScene !== 'Home') {
                Actions.pop();
                return true;
            } else {
                backButtonPressedOnceToExit = true;
                ToastAndroid.show("Press Back Button again to exit",ToastAndroid.SHORT);
                //setting timeout is optional
                setTimeout( () => { backButtonPressedOnceToExit = false }, 2000);
                return true;
            }
        }
    }

当我尝试调试它时，我的调试器不会进入函数内部。请让我知道我做错了什么。

标签： react-nativereact-native-router-flux

解决方案

使用组件backAndroidHandler的道具Router。

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} navBarTintColor={'white'} navBarButtonImageColor={'white'} tintColor={'white'} sceneStyle={styles.routerScene} backAndroidHandler={this.onBackPress}>

在 中onBackPress，您提到了错误的屏幕。Home不在您的路由器堆栈中。让它Screen1。在第一个 if 条件下也“返回 true”。

推荐阅读