react native ——android返回键问题

前端之家收集整理的这篇文章主要介绍了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;
    }
  }
原文链接:https://www.f2er.com/react/303054.html

猜你在找的React相关文章