react native ——android返回键问题

1启动页为android-跳转RN界面 ,物理返回键最终后退到native android 界面。

2启动页为ReactActivity 首页即为RN界面,android物理返回键不做处理,会直接退出应用。

栈示例图:

解决办法

在添加导航之后的第一个界面。

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

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
  }
  onBackAndroid = () => {
    const nav = this.props.navigator;
    const routers = nav.getCurrentRoutes();
    if (routers.length > 1) {
      nav.pop();
      return true;
    }else {
      if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
        return false;
      }
      this.lastBackPressed = Date.now();
      ToastAndroid.show('再按一次退出应用',1000);
      return true;
    }
  };

个性化

如果你需要个性化参考:

 onBackAndroid() {
    const navigator = this.props.navigator;
    if (!navigator) return false;
    const routers = navigator.getCurrentRoutes();
    // 当前页面不为root页面时的处理
    if (routers.length > 1) {
      const top = routers[routers.length - 1];
      if (top.ignoreBack || top.component.ignoreBack) {
        // 路由或组件上决定这个界面忽略back键
        return true;
      }
      const handleBack = top.handleBack || top.component.handleBack;
      if (handleBack) {
        // 路由或组件上决定这个界面自行处理back键
        return handleBack();
      }
      // 默认行为: 退出当前界面。
      navigator.pop();
      return true;
    }
    // 当前页面为root页面时的处理
    if (this.lastBackPressed && (this.lastBackPressed + 2000 >= Date.now())) {
      //最近2秒内按过back键,可以退出应用。
      NativeCommonTools.onBackPressed();
      return true;
    }
    this.lastBackPressed = Date.now();
    ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
    return true;
  }

  // 自定义返回按钮事件
  customHandleBack(navigator, handleBack) {
    if (navigator) {
      let routes = navigator.getCurrentRoutes(); //nav是导航器对象
      let lastRoute = routes[routes.length - 1]; // 当前页面对应的route对象
      lastRoute.handleBack = handleBack;
    }
  }

你可能感兴趣的:(ReactNative)