React Native中如何防止屏幕休眠？视频播放唤醒屏幕的废弃API替代方案

嘿，我来帮你搞定这个问题！你提到的NativeModules.KCKeepAwake.activate()确实已经被废弃了，不过现在有更靠谱的替代方案，不管是防止屏幕休眠还是视频播放时唤醒屏幕都能轻松实现。

首选方案：使用react-native-keep-awake库 #

这是目前社区里最常用的替代方案，维护活跃，支持最新的React Native版本，用法还特别简单——我平时做视频播放功能的时候也常常用它。

安装步骤 #

1. 先安装库：

   npm install react-native-keep-awake --save
   # 或者用yarn
   yarn add react-native-keep-awake
   

2. 对于React Native 0.60+版本，自动链接已经生效，不需要额外操作；如果是旧版本，你需要手动执行链接命令：

   react-native link react-native-keep-awake
   

使用方法 #

函数组件（推荐用Hook）

在你的视频播放组件里，可以在播放开始时激活唤醒，暂停或结束时停用，这样既满足需求又不会浪费电量：

import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import KeepAwake from 'react-native-keep-awake';

const VideoPlayer = () => {
  const handlePlay = () => {
    // 播放视频时激活屏幕唤醒，防止休眠
    KeepAwake.activate();
    // 这里添加你的视频播放逻辑，比如调用播放器的play方法
  };

  const handlePause = () => {
    // 暂停时停用唤醒，让屏幕恢复正常休眠逻辑
    KeepAwake.deactivate();
    // 这里添加你的视频暂停逻辑
  };

  // 组件卸载时一定要记得停用唤醒，避免影响其他页面的休眠设置
  useEffect(() => {
    return () => {
      KeepAwake.deactivate();
    };
  }, []);

  return (
    <View>
      <Button title="播放" onPress={handlePlay} />
      <Button title="暂停" onPress={handlePause} />
    </View>
  );
};

export default VideoPlayer;

类组件

如果你还在使用类组件，也能轻松适配：

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import KeepAwake from 'react-native-keep-awake';

class VideoPlayer extends Component {
  componentWillUnmount() {
    // 组件销毁时停用唤醒
    KeepAwake.deactivate();
  }

  handlePlay = () => {
    KeepAwake.activate();
    // 播放逻辑
  };

  handlePause = () => {
    KeepAwake.deactivate();
    // 暂停逻辑
  };

  render() {
    return (
      <View>
        <Button title="播放" onPress={this.handlePlay} />
        <Button title="暂停" onPress={this.handlePause} />
      </View>
    );
  }
}

export default VideoPlayer;

备选方案：手动实现原生模块（不依赖第三方库） #

如果你不想引入第三方库，也可以自己写原生代码来实现，不过相对麻烦一些，需要处理iOS和Android两端的逻辑：

iOS端 #

在你的iOS项目中，找到对应的ViewController文件，添加以下代码来控制屏幕休眠：

// 激活唤醒，防止屏幕休眠
[[UIApplication sharedApplication] setIdleTimerDisabled:YES];

// 停用唤醒，恢复正常休眠
[[UIApplication sharedApplication] setIdleTimerDisabled:NO];

然后通过React Native的NativeModules机制，把这两个方法暴露给JS端调用。

Android端 #

在Android项目中，找到对应的Activity文件，添加：

// 激活唤醒
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

// 停用唤醒
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

同样需要通过NativeModules暴露给JS端。

不过说实话，手动写原生模块需要维护两端代码，还要处理版本兼容性，所以还是更推荐用react-native-keep-awake库，省心又靠谱。

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