React Native安卓应用Modal弹窗无法禁用截屏/录屏问题咨询

根因说明 #

React Native 官方Modal组件在安卓端运行时，会独立创建一个新的Window实例，你在MainActivity主Window上添加的FLAG_SECURE标记不会自动同步到Modal对应的新Window上，所以会出现普通页面禁止截屏生效、Modal内容仍可被截取的问题。

可行实现方案 #

方案1：全局管控所有Modal（修改原生源码，一次配置全项目生效） #

找到安卓端RN Modal组件的原生实现类com.facebook.react.views.modal.ReactModalHostView，定位到Dialog实例创建、Window参数配置的代码段，在Dialog调用show()方法前插入安全标记配置：

dialog.getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_SECURE,
    WindowManager.LayoutParams.FLAG_SECURE
);

RN 0.65及以上版本可以直接修改createDialog方法的返回逻辑，统一给所有Modal对应的Dialog添加安全标记。

方案2：灵活控制单个Modal（自定义封装，无需修改原生源码） #

如果不需要全局禁用所有Modal的截屏能力，可以单独封装自定义Modal组件，通过原生模块动态控制安全标记：

1. 首先封装原生方法模块，提供开关FLAG_SECURE的能力：

@ReactMethod
public void toggleSecureFlag(Boolean isEnable) {
    UiThreadUtil.runOnUiThread(() -> {
        Activity currentActivity = getCurrentActivity();
        if (currentActivity == null) return;
        if (isEnable) {
            currentActivity.getWindow().setFlags(
                WindowManager.LayoutParams.FLAG_SECURE,
                WindowManager.LayoutParams.FLAG_SECURE
            );
        } else {
            currentActivity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SECURE);
        }
    });
}

2. 在JS端自定义Modal组件，监听Modal的visible属性变化，显示Modal时调用开启安全标记的方法，Modal隐藏时调用清除标记的方法即可。

验证提示 #

修改完成后需要重新编译安卓原生项目生效，测试时除了系统自带截屏功能，也需要搭配第三方录屏软件（如AZ Screen Recorder）验证Modal显示时的内容防护效果。

内容的提问来源于stack exchange，提问作者Dũng Lê