如何在Android React Native中监听切换应用按钮？RN不支持则用Java实现

React Native 端的限制 #

React Native 自带的 BackHandler 仅支持监听返回键（hardwareBackPress 事件），无法直接监听多任务/应用切换按钮的点击事件。你提供的 BackHandler 示例代码是用于监听返回键的，代码如下：

import React, { useEffect } from "react";
import { Text, View, StyleSheet, BackHandler, Alert } from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Click Back button!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontSize: 18,
    fontWeight: "bold"
  }
});

export default App;

但这套方案不适用于多任务键的监听，需要通过原生Android代码实现。

Android 原生（Java）实现监听 #

Android系统中，多任务键的点击会触发应用失去焦点或进入后台的状态变化，我们可以通过以下两种方式监听：

方法1：通过Activity监听窗口焦点变化 #

修改React Native项目Android端的 MainActivity.java 文件：

package com.yourprojectname;

import com.facebook.react.ReactActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "YourProjectName"; // 替换为你的项目名称
  }

  @Override
  public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (!hasFocus) {
      // 应用失去焦点，大概率是按下了多任务键
      Toast.makeText(this, "多任务键被触发", Toast.LENGTH_SHORT).show();
      // 这里可添加自定义业务逻辑
    }
  }
}

方法2：监听应用前后台切换（更准确） #

通过注册 ActivityLifecycleCallbacks 监听应用整体的前后台状态变化，修改 MainApplication.java：

package com.yourprojectname;

import android.app.Application;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication, Application.ActivityLifecycleCallbacks {

  private int activityCount = 0;
  private boolean isAppInForeground = true;

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    registerActivityLifecycleCallbacks(this);
    SoLoader.init(this, /* native exopackage */ false);
  }

  @Override
  public void onActivityCreated(Activity activity, Bundle savedInstanceState) {}

  @Override
  public void onActivityStarted(Activity activity) {
    activityCount++;
    if (!isAppInForeground) {
      isAppInForeground = true;
    }
  }

  @Override
  public void onActivityResumed(Activity activity) {}

  @Override
  public void onActivityPaused(Activity activity) {}

  @Override
  public void onActivityStopped(Activity activity) {
    activityCount--;
    if (activityCount == 0) {
      // 应用完全进入后台，可能是按下多任务键或Home键
      isAppInForeground = false;
      Toast.makeText(this, "应用进入后台（多任务键触发）", Toast.LENGTH_SHORT).show();
    }
  }

  @Override
  public void onActivitySaveInstanceState(Activity activity, Bundle outState) {}

  @Override
  public void onActivityDestroyed(Activity activity) {}
}

（可选）将事件传递到React Native端 #

如果需要在RN层处理该事件，可通过原生模块发送事件：

1. 创建原生模块 TaskSwitcherModule.java：

package com.yourprojectname;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class TaskSwitcherModule extends ReactContextBaseJavaModule {

  public TaskSwitcherModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "TaskSwitcherModule";
  }

  // 发送事件到RN
  public void sendTaskSwitchEvent() {
    getReactApplicationContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("onTaskSwitch", "多任务键被触发");
  }
}

2. 在 MainApplication.java 的 getPackages 中注册模块：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new ReactPackage() {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
          return Arrays.asList(new TaskSwitcherModule(reactContext));
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
          return Collections.emptyList();
        }
      }
  );
}

3. 在RN中监听事件：

import { NativeEventEmitter, NativeModules, Alert } from 'react-native';
import { useEffect } from 'react';

const { TaskSwitcherModule } = NativeModules;
const taskSwitchEmitter = new NativeEventEmitter(TaskSwitcherModule);

// 在组件中添加监听
useEffect(() => {
  const subscription = taskSwitchEmitter.addListener(
    'onTaskSwitch',
    (message) => {
      Alert.alert('事件通知', message);
    }
  );

  return () => subscription.remove();
}, []);

内容的提问来源于stack exchange，提问作者Ivan Surya Hutomo