react native ——android返回键问题

最新推荐文章于 2023-11-27 10:21:42 发布

TaoLee-

最新推荐文章于 2023-11-27 10:21:42 发布

阅读量4.7k

点赞数

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/TaooLee/article/details/77528436

版权

ReactNative 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在React Native中处理Android物理返回键的问题，包括两种不同场景的解决方案：当启动页为Android原生页面时，返回键应跳转到原生界面；而当启动即为ReactActivity时，返回键默认行为会导致应用退出。文中提供了具体的栈示例和如何进行返回键行为的个性化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
    }
  }