React Native应用仅指定屏幕显示在锁屏上的技术问询

我正好碰到过类似的需求，你的思路完全对——通过动态控制WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED这个标记，就能实现只有特定页面在锁屏时显示的效果。我已经开发了一个轻量的原生模块来搞定这个事儿，下面是具体的实现和使用方法：

解决方案概述 #

之前你在MainActivity.java里全局设置了FLAG_SHOW_WHEN_LOCKED，导致整个应用都能在锁屏状态下显示。现在我们要做的就是把这个控制粒度缩小到页面级：在需要锁屏显示的页面主动激活标记，离开页面时清除标记，这样就能精准控制哪些页面可以在锁屏时展示了。

使用自定义原生模块（react-native-keep-awake） #

这个模块封装了激活和清除锁屏标记的原生逻辑，直接调用就行：

1. 安装模块 #

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

2. 在目标页面中调用 #

比如你的通话界面组件，可以这样写：

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

const CallScreen = () => {
  // 进入页面时激活锁屏显示权限
  useEffect(() => {
    KeepAwake.activate();
    
    // 离开页面时清除标记，恢复应用默认的锁屏行为
    return () => {
      KeepAwake.deactivate();
    };
  }, []);

  // 你的通话界面UI代码...
  return (
    <View>
      {/* 通话相关组件 */}
    </View>
  );
};

export default CallScreen;

模块核心逻辑（可选，帮你理解底层实现） #

如果你好奇模块内部是怎么工作的，核心就是在原生层封装了两个方法：

• activate()对应原生代码：

  getWindow().addFlags(WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED);
  

• deactivate()对应原生代码：

  getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED);
  

通过React Native的原生桥接机制，让JS层可以直接调用这两个方法，从而实现页面级的锁屏显示控制。

内容的提问来源于stack exchange，提问作者William Brochensque junior