详解React Native监听Android回退按键与程序化退出应用

详解React Native监听Android回退按键与程序化退出应用

前言

我们知道Android回退按键，会控制页面返回， 并且退出应用并非真正意义退出，仍在后台运行，所以在某些场景下需要监控android回退按键，那么在React Native中应该如何应用呢？我们具体来看看。

BackAndroid

此模块用于监听硬件的back键操作。

看下具体代码：

BackAndroid.addEventListener('hardwareBackPress', function() {
   if (!this.onMainScreen()) {
    //代码
    return true;
   }
   return false;
});

如果监听事件中没有任何监听函数，或者监听函数的返回值不是true，则会调用默认的back键功能来退出应用。

常用的方法

static exitApp()

执行退出应用

static addEventListener(eventName: BackPressEventName, handler: Function)

添加监听事件

static removeEventListener(eventName: BackPressEventName, handler: Function)

删除监听事件

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Android Rreact Native 常见错误总结

    Android Rreact Native 常见错误总结 1.invariant violation:expected a component class,got[object object] 创建自定义组件首字母要大写,否则会报错. 2.Module 0 is not a registered callable module. 将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android studio工具升级

  • React Native学习之Android的返回键BackAndroid详解

    前言 最近在学习使用 React Native开发,iOS搞完,开始适配安卓,由于木有接触过安卓,所以碰到了很多问题,第一个问题,安卓的返回键BackAndroid问题, 我写了一个工具类,来搞定,其中用到了java原生代码与js交互;好吧,下面开始正式内容: 上代码: // BackAndroidTool // 功能: "安卓手机上的返回键" // Created by 小广 on 2016-05-10 下午. // Copyright © 2016年 All rights rese

  • React Native中Android物理back键按两次返回键即退出应用

    React Native中Android物理back键按两次返回键即退出应用

    前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • 详解React Native与IOS端之间的交互

    详解React Native与IOS端之间的交互

    前置准备 首先最好了解一点关于 oc 的语法知识 1.创建声明文件nativeModule.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> @interface nativeModule : NSObject <RCTBridgeModule> @end 2.创建文件nativeModule.m #import <Foundation/Foundation.h> #i

  • 详解JavaScript实现监听路由变化

    目录 history pushState()方法 pushState()使用场景 replaceState() 方法 popstate事件 pushState和replaceState如何监听呢? 获取当前状态 对比 总结 前端实现路由变化主要有两种方式,这两种方式最大特点就是实现URL切换无刷新功能 通过hash改变,利用window.onhashchange 监听. 通过history的改变,进行js操作加载页面,然而history并不像hash那样简单,因为history的改变,除了浏览器

  • 详解React Native中如何使用自定义的引用路径

    目录 RN的相对路径地狱 RN的自定义路径需要的依赖 解决自定义引用路径导致的eslint报错问题 RN的相对路径地狱 我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了.伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方

  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    详解React Native开源时间日期选择器组件(react-native-datetime)

    项目介绍 该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-dateti

  • 详解React Native 屏幕适配（炒鸡简单的方法）

    前言 React Native 可以开发 ios 和 android 的 app,在开发过程中,势必会遇上屏幕适配(ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕)的问题,下面介绍一种几行代码搞定 RN 适配的方法! 屏幕适配的前置知识 RN 中的尺寸单位为 dp,而设计稿中的单位为 px 原理 虽然单位不同,但是元素所占屏幕宽度的比例是相同的 利用元素所占屏幕比例不变的特性,来将 px 转为 dp(这样实现屏幕适配的话,在不同尺寸的屏幕下,元素会等比放大或缩小) 公式如下: 设计

  • 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化

    回忆 在上一篇Vue响应式原理-理解Observer.Dep.Watcher简单讲解了Observer.Dep.Watcher三者的关系. 在Observer的伪代码中我们模拟了如下代码: class Observer { constructor() { // 响应式绑定数据通过方法 observe(this.data); } } export function observe (data) { const keys = Object.keys(data); for (let i = 0; i

  • 详解react native页面间传递数据的几种方式

    1. 利用react-native 事件DeviceEventEmitter 监听广播 应用场景: - 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面. - 多个多媒体来回切换播放,暂停后二次继续播放等问题. 代码如下: A页面 componentDidMount() { // 利用DeviceEventEmitter 监听 concactAdd事件 this.subscription = DeviceEventEmitter.addListener

  • 详解vue2.0监听属性的使用心得及搭配计算属性的使用

    我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了.根据需求配合监听属性我们得到下面的代码: <template> <div id="app"> 年齡:<input type

随机推荐