react native ——android返回键问题

前端之家收集整理的这篇文章主要介绍了react native ——android返回键问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

栈示例图:

解决办法

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

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

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

个性化

如果你需要个性化参考:

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

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

猜你在找的React相关文章