React Native中如何在特定页面禁止手机屏幕自动锁屏

最优方案是使用社区生产环境广泛验证的react-native-keep-awake原生桥接库，无需自行编写双端原生兼容代码，可精准绑定页面生命周期控制常亮状态，不会干扰其他页面的系统默认锁屏逻辑。

实现步骤 #

• 安装依赖
  执行npm安装命令：npm install react-native-keep-awake
  React Native 0.60及以上版本支持autolinking，iOS端进入项目ios目录执行pod install完成原生依赖关联即可；0.60以下版本需额外执行react-native link react-native-keep-awake完成手动link。

• 绑定目标页面生命周期
  核心原则是页面进入时开启常亮，离开时立刻关闭常亮，避免不必要的电量消耗。
  如果使用React Navigation这类会缓存页面的导航库，不要直接用组件挂载/卸载生命周期，优先用导航提供的焦点事件绑定逻辑，避免缓存导致状态不释放：

  import { KeepAwake } from 'react-native-keep-awake';
  import React from 'react';
  import { View, Text } from 'react-native';
  import { useFocusEffect } from '@react-navigation/native';
  
  const NeedKeepAwakePage = () => {
    // 页面获得焦点（进入用户视野）时开启常亮
    useFocusEffect(
      React.useCallback(() => {
        KeepAwake.activate();
        // 页面失去焦点（离开当前页面）时关闭常亮，恢复系统默认锁屏规则
        return () => {
          KeepAwake.deactivate();
        }
      }, [])
    );
  
    return (
      <View>
        <Text>当前页面停留时屏幕不会自动锁屏</Text>
      </View>
    )
  }
  
  export default NeedKeepAwakePage;
  

  如果是无缓存的简单页面，直接在useEffect（函数组件）或componentDidMount/componentWillUnmount（类组件）中对应调用activate和deactivate方法即可。

无依赖原生实现（不推荐） #

如果有特殊需求不想引入第三方库，可以自行封装原生桥接：

• iOS端：通过UIApplication.shared.isIdleTimerDisabled属性控制，值为true时禁止锁屏，false时恢复默认
• Android端：给当前Activity的Window添加WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON标记开启常亮，移除标记即可恢复

注意：自行实现需要额外处理应用切后台、系统版本兼容、异常退出状态重置等边缘case，稍有疏漏就会导致App全局常亮，额外消耗用户电量，非特殊场景不推荐使用。

避坑提示 #

• 禁止在App入口全局调用KeepAwake.activate()，否则所有页面都会禁用锁屏，严重影响续航
• 如果目标页面存在弹窗、子路由嵌套，要确保所有离开路径都能触发deactivate逻辑，避免状态残留

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