实现 React Native 再按一次退出

单页面:

...
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid)
} lastBackPressed =
onBackAndroid = () => {
if (this.lastBackPressed && this.lastBackPressed + >= Date.now()) {
BackHandler.exitApp()
return false
}
this.lastBackPressed = Date.now()
ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT)
return true
} componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid)
}
...

包含在导航器中:

let lastBackPressed = ;
const defaultStateAction = RootNav.router.getStateForAction;
RootNav.router.getStateForAction = (action, state) => {
if (DEVICE.android && state && action.type === NavigationActions.BACK && state.routes.length === 1) {
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
BackHandler.exitApp();
return false;
}
this.lastBackPressed = Date.now();
ToastUtil.showToast("再按一次退出应用");
const routes = [...state.routes];
return {
...state,
...state.routes,
index: routes.length - 1,
};
} else {
return defaultStateAction(action, state);
}
};

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/10959609.html

转载请著名出处!谢谢~~

[RN] React Native 再按一次退出的更多相关文章

  1. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  2. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  3. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  4. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  5. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  6. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  7. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  8. [RN] React Native 调试技巧

    React Native 调试技巧 一. 安卓模拟器调出Dev Setting 命令 adb shell input keyevent 二.图片不出来时,先运行此命令,再重新 run react-na ...

  9. [RN] React Native 使用 阿里 ant-design

    React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...

随机推荐

  1. 常用Java API之Scanner:功能与使用方法

    Scanner 常用Java API之Scanner:功能与使用方法 Scanner类的功能:可以实现键盘输入数据到程序当中. 引用类型的一般使用步骤:(Scanner是引用类型的) 1.导包 imp ...

  2. Java学习:方法的使用与注意事项

    方法的使用与注意事项 定义一个方法的格式:public static void 方法名称(){ 方法体 } 如何调用方法,格式: 方法名称(): 方法名称的命名规则和变量一样,使用小驼峰. 方法体:也 ...

  3. Mysql系列(四) —— MySQL的Charset和Collation

    本文转载自:再见乱码:5分钟读懂MySQL字符集设置 一.内容概述 在MySQL的使用过程中,了解字符集.字符序的概念,以及不同设置对数据存储.比较的影响非常重要.不少同学在日常工作中遇到的" ...

  4. 汉诺(hanio)塔问题

    规则:大盘子不能压在小盘子上.要求:将A柱子上所有盘(每个盘大小不同)放到C柱子上,使用B柱子作辅助. 比如柱子A上有n个盘,执行以下步骤: 1. 把n-1个盘从源柱移动到临时柱上: 2. 把源柱上剩 ...

  5. WCF学习笔记(一)---我的第一个WCF程序

    一.创建WCF程序   1.创建一个控制台程序(WCFBlog)   2.添加wcf项目   3.将默认的IService1和Service1改成自己的名字   4.在ICalculateServic ...

  6. Java之路---Day19(set接口)

    set接口 java.util.Set 接口和 java.util.List 接口一样,同样继承自 Collection 接口,它与 Collection 接口中的方 法基本一致,但是set接口中元素 ...

  7. Java打印日历表

    今天来吐槽一下Java的Calendar类的使用问题,反正我是弄了半天. 首先是,遇到一个问题,输入年份和月份,需要打印这个月的日历,网上有不少代码,但我用了几个感觉都不是很靠谱. 然后经过一番探索, ...

  8. 32、flex布局

    html: <div class="parent"> <div class="son">1</div> <div cl ...

  9. 2. vue基础-vue-cli(vue脚手架)

    1. 作用 ​ 快速创建一个基于webpack模板的项目 2. 安装工具 安装webpack:使用npm全局安装webpack,打开命令行工具,输入 npm install webpack -g,安装 ...

  10. 从 Vue 的视角学 React(三)—— 事件处理

    如果要处理某个元素的 click 事件,原生 js 可以直接为该元素添加一个 onclick 函数 Vue 封装了 v-on 指令,可以简化为 @click 并添加相应的函数 React 的开发思想是 ...