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

前言

本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

话不多说,直接上图:


测试代码

第16~22行 设置事件监听以及移除事件监听.

componentWillMount(){

   BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);

}

componentWillUnmount() {

   BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);

}

第24~32行实现onBackAndroid方法

onBackAndroid = () => {

   if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {

   //最近2秒内按过back键，可以退出应用。

   return false;

  }

this.lastBackPressed = Date.now();

ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);

return true;

};

代码的核心部分就是上诉所说的那两段代码了,下面送上效果图.


第一次按返回键弹出ToastAndroid框提示再按一次退出应用

两秒中内再按一次返回键退回手机桌面.

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Android实现长按back键退出应用程序的方法

    本文实例讲述了Android实现长按back键退出应用程序的方法.分享给大家供大家参考.具体分析如下: 最近在做一个Android上的应用,碰到一个问题就是如何实现长按back键退出应用程序.在网上查找了很多资料,发现几乎没有这样的实现,大部分在处理时是双击back键来退出应用程序.参考了一下双击back键退出应用程序的代码,网上主流的一种方法是下面这种方法,实现起来比较简单: @Override public boolean onKeyDown(int keyCode, KeyEvent ev

  • Android Back键点击两次退出应用详解及实现方法总结

    思路:Android中捕获用户按键是在onKeyDown方法中,只需要判断用户按键是否是KEYCODE_BACK即后退键即可,剩下的即为判断两次点击BACK键时间间隔问题了 第一种实现方式 package com.example.clickexittest; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import andr

  • Android实现点击两次BACK键退出应用

    思路:Android中捕获用户按键是在onKeyDown方法中,只需要判断用户按键是否是KEYCODE_BACK即后退键即可,剩下的即为判断两次点击BACK键时间间隔问题了. 第一种实现方式: package com.example.clickexittest; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import an

  • Android 双击Back键退出应用的实现方法

    Android 双击Back键退出应用的实现方法 实现原理: 双击退出程序的原理无非就是设置一个退出标识(询问是否退出),如果改变了这个标识(确认退出),则再次点击时立马退出,如果规定时间内没有退出,则延时重置这个标识(不退出). 延时重置: 使用 Java API 提供了 Timer 类,它能够执行定时任务.利用 Timer 就能够对标识进行延时重置. Timer 对象的 schedule( ) 方法需要一个 TimerTask 对象和一个时间长度(毫秒)作为参数.TimerTask 对象需要

  • 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 手机吞字的解决方案

    目录 复现问题 解决问题 示例 React Native App 在部分型号的 Android 手机上,可能会发生文字显示不全的问题. 官方也有一个 相关的 Issue ,并提供了如下的解决方案: const defaultFontFamily = { ...Platform.select({ android: { fontFamily: "" }, }), } const oldRender = Text.render Text.render = function (...args)

  • React Native中Navigator的使用方法示例

    React Native中Navigator的使用方法示例

    前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码. 1.习

  • React Native中的RefreshContorl下拉刷新使用

    我们知道App中都有下拉加载,在React Native中也有类似的控件 一.属性方法 (1) onRefresh function 在视图开始刷新的时候调用 (2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中 (3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种 (4) enabled bool android平台适用 用来设置下拉刷新功能是否可用 (5) progre

  • React Native中实现动态导入的示例代码

    React Native中实现动态导入的示例代码

    目录 背景 多业务包 动态导入 Metro 打包原理 打包过程 bundle 分析 __d函数 __r函数 方案设计 分 识别入口 树拆分 bundle 生成 合 总结 背景 随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来

  • React Native 中添加自定义字体的方法

    React Native 中添加自定义字体的方法

    目录 添加字体 定义 assets 目录 执行 link 命令 在样式中使用字体 示例 在 React Native 中,如何添加自定义字体呢?React Native 提供了便捷的命令行工具来帮助我们. 添加字体 在项目根目录下创建 assets/fonts 文件夹,把字体文件放到这个文件夹下. 如图: 定义 assets 目录 在项目根目录下创建 react-native.config.js 文件,编辑其中内容,留意第 6 行,这和我们自定义字体文件所在目录一致. module.export

  • React Native自定义Android的SSL证书链校验

    React Native自定义Android的SSL证书链校验

    目录 前言 HTTPS请求 WebSocket 前言 虽然这次分享的内容解决了本人的实际开发需求,但由于不是专职的Android开发工程师,涉及到的Android相关内容可能会存在错误或者写法不合理,仅供参考,请多多指教. 本文示例基于: React Native - 0.67.3 Android - 10+ 不包括iOS 由于业务原因,需要在生产环境里面使用自签发证书,那自然这个证书是无法通过Android证书链验证的,为此需要自定义校验规则. 本文分为两部分,介绍了对HTTPS请求和WebS

  • react native中的聊天气泡及timer封装成的发送验证码倒计时

    其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二种a页面获取要显示内容的形式是 点击出发,获取) 3 需要说的还是na

  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为

  • 在 React Native 中使用 CSS Modules的配置方法

    目录 安装依赖和配置 使用 示例 有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native.本文将介绍如何在 React Native 中使用 CSS Modules. 安装依赖和配置 首先安装 react-native-sass-transformer 使得我们可以在 React Native 应用中使用 sass 样式. yarn add react-native-sass-transformer sass -D 参考如下配置,修改 me

随机推荐