如何在react-native中实现设备休眠与唤醒状态的检测

你之前尝试的两种方案存在固有局限：

• react-navigation 5的focus事件是JS端路由生命周期回调，仅作用于React导航栈的页面切换场景，无法感知系统层面的状态变更，自然识别不到设备休眠、应用退后台的行为
• React Native内置的AppState模块仅监听应用进程本身的前后台切换状态，没有封装系统的锁屏/解锁事件回调，因此不会将设备休眠判定为应用状态变更，不会触发对应监听事件

以下是两种可行的实现方案：

方案1：封装原生自定义模块（兼容性最稳定） #

安卓端实现 #

在原生层注册系统广播，监听三类系统动作：

• 设备休眠（锁屏）：ACTION_SCREEN_OFF
• 设备唤醒（亮屏）：ACTION_SCREEN_ON
• 设备解锁完成：ACTION_USER_PRESENT
  接收到对应广播后，通过DeviceEventEmitter发送自定义事件到JS层即可实现监听。

iOS端实现 #

在原生层监听系统通知：

• 设备休眠（锁屏）：UIApplicationProtectedDataWillBecomeUnavailable
• 设备唤醒（解锁）：UIApplicationProtectedDataDidBecomeAvailable
  接收通知后通过RCTEventEmitter发送自定义事件到JS层即可。

方案2：使用封装完成的第三方库 #

可以直接使用已经封装好上述逻辑的开源库，比如react-native-screen-lock-event，无需自己写原生代码，示例调用逻辑：

import ScreenLockEvent from 'react-native-screen-lock-event';
import { useEffect } from 'react';

useEffect(() => {
  // 监听设备休眠锁屏
  const lockSub = ScreenLockEvent.addListener('screenLocked', () => {
    // 休眠后的业务逻辑
  });
  // 监听设备唤醒解锁
  const unlockSub = ScreenLockEvent.addListener('screenUnlocked', () => {
    // 唤醒后的业务逻辑
  });

  return () => {
    lockSub.remove();
    unlockSub.remove();
  };
}, []);

注意：部分安卓定制ROM会默认限制第三方应用的锁屏广播监听权限，若出现事件无响应的情况，需要引导用户手动开启应用的「自启动」「后台弹出界面」相关权限。

内容的提问来源于stack exchange，提问作者DSchana