react native ——android返回键问题

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

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

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

栈示例图:

解决办法

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

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

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

个性化

如果你需要个性化参考:

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

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

猜你在找的React相关文章