在android app 的开发的开发过程中,我们需要监听android的返回键,退出active界面。
有时为了,能够给用户更好的体验,需要app退出界面后,app在后台运行。(当然这可能还需要实现 常驻内存,可以点击这里查看
常驻内存实现
)
react native 提供backAndroid api,可以我们使用后发现。该api的退出,是结束进程,也就是完全退出。
于是查看该api,发现backAndroid api在ReactActivity里面的实现,最后默认会调用 invokeDefaultOnBackPressed 这个方法。
那我们想要实现在根路由里面,退出到后台运行,而不是关闭路由。该怎么解决呢?
这里我们只需在MainActivity里面重写invokeDefaultOnBackPressed方法就行。
为了方便大家copy,我贴出重写后的代码。我想对于react native android 着急的同学可以看看。
public void invokeDefaultOnBackPressed() {
PackageManager pm = getPackageManager();
ResolveInfo homeInfo =
pm.resolveActivity(new Intent(Intent.ACTION_MAIN).addCategory(Intent.CATEGORY_HOME), 0);
ActivityInfo ai = homeInfo.activityInfo;
Intent startIntent = new Intent(Intent.ACTION_MAIN);
startIntent.addCategory(Intent.CATEGORY_LAUNCHER);
startIntent.setComponent(new ComponentName(ai.packageName, ai.name));
startActivity(startIntent);
}
具体思路就是在退出前,将当期的Intent 保存。
或者这样重写invokeDefaultOnBackPressed方法,当然这样重写的话,只会在根路由退出才起作用
public void invokeDefaultOnBackPressed() {
moveTaskToBack(false);
当然要实现根路由退出你得在根路由实现以下方法。 注意backandroid 返回false 会结束应用运行,所以最后返回true
removeBackAndroidListener=()=> {
if (Platform.OS === 'android') {
BackAndroid.removeEventListener('hardwareBackPress', () => {
addBackAndroidListener=(navigator)=> {
if (Platform.OS === 'android') {
BackAndroid.addEventListener('hardwareBackPress',() => {
return this._onBackAndroid(navigator);
_onBackAndroid=(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 ) {
//最后退出到后台运行。
BackAndroid.exitApp();
return true;
this.lastBackPressed = Date.now();
// ToastAndroid.show(I18n.t('text.doubleAgain'),ToastAndroid.SHORT);
return true;
* 关于前后台监听,HOME直接后台不执行component相关周期函数,back
* 后台是执行的,back后返回应该是重新render了,所以监听HOME或者
* BACK可以同一使用APPState的状态码来操作
* APPState是有三个状态码的,有一个不常用就没写
import React, { Component } from 'react
React Native Exit App 使用教程
react-native-exit-appExit,close,kill,shutdown app completely for React Native on iOS and Android.项目地址:https://gitcode.com/gh_mirrors/re/react-native-exit-app 1. 项目的目录结构及介绍
这个库依赖于React Native的HeadlessJS ,目前只支持Android。
在本机端,它使用Firebase JobDispatcher或AlarmManager 。
Firebase JobDispatcher(默认值):无法准确计划任务...
React Native后台服务库,用于在Android和iOS中永久运行后台任务。 安排一个后台作业,当您的应用程序在后台或前台时将运行您JavaScript。
Android :此库依赖于React Native的 for Android。 在构建JS任务之前,请确保阅读所有。 即使该应用程序已关闭,作业仍将运行。
iOS :该库依赖iOS的,该不会使您的应用永远永远在后台。 但是,当您从该库中提取JS时,您可以依赖其他使用音频,地理定位等功能的库,例如来保持应用程序在后台运行。
转到以查看如何安装,与RN的兼容性以及链接过程。
转到查看示例代码和选项。
iOS部分最初是由分叉的
该库是根据MIT许可发布的。 有关更多信息,请参阅 。
import React from 'react';
import {View, AppState, ToastAndroid, BackHandler} from 'react-native';
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
appState: AppState.currentSta
退出/关闭/杀死/关闭您的本机应用程序。 不调用崩溃通知。
对于React Native <0> 0.47,请使用react-native-exit-app> = 1.xx
快速简便:
npm install react-native-exit-app --save
react-native link react-native-exit-app
或手动:将最新版本视情况添加到package.json中。
"name"
react-native中有时候需要定时执行一些后台任务,比如定时发送消息,定时统计数据等.这个时候就需要使用另外注册一个视图来做这些东西了,不然在同步任务中做这些任务,一旦任务比较耗时就会卡住后面的进程,甚至导致后面的进程不再渲染页面.
注册另外一个入口
在合适的位置:页面启动或者某个需要的时候,注册并启动我们的另外一个视图.这个时候其实相当于启动了另外一个线程.
这里注意一下,这个视图里的东西...
AppState.addEventListener(‘change’, this._handleAppStateChange);
_handleAppStateChange = nextappState =>{
console.log(‘nextappState’,nextappState)
React Native Headless JS(后台任务)
Headless JS是一种使用js在后台执行任务的方法。它可以用来在后台同步数据、处理推送通知或是播放音乐等等。
JS端的API
首先我们要通过AppRegistry来注册一个async函数,这个函数我们称之为“任务”。注册方式类似在index.js中注册RN应用:
AppRegistry.registerHeadless...
在开发的过程中,定时执行代码很常用,但是有个问题是,只要手机APP切到后台运行代码就停止执行了。最近在开发一款音乐播放器APP,想实现定时“停止播放”功能,就需要用到后台也可以定时执行代码的情况。
最常见的定时器写法
开始定时器
timer = setInterval(function() {
//执行代码
}, 1000);
结束定时器
clearInterval(timer);
这样的写法,实测如果APP后台运行了,计时器就会停止工.