编写reactnative禁止截图插件

插件地址

github

npmjs

目的

APP开发中有个这样的需求，需要在注册页禁止手机截图功能。

目前这个功能只能在android上实现，IOS无法禁止系统的截图功能。

通过查阅相关资料，我把查到的结果封装成一个插件，以供大家使用。

代码

封装API,对外暴露两个方法：setFlag,clearFlag。第一个方法在生命周期DidMounted调用，第二个方法在声明周期willUnMount 调用。这样就可以确保当前组件页面禁止系统截图功能。

import { NativeModules, Platform } from 'react-native';
const { RNForbidShot } = NativeModules;
export default {
setFlag: () => {
if (Platform.OS === 'android') {
RNForbidShot.setFlag();
}
},
clearFlag: () => {
if (Platform.OS === 'android') {
RNForbidShot.clearFlag();
}
},
};

原生代码部分

这里的代码是我查阅的部分，如果有相关需求的同学可以在网上找到相关的代码，我只是把查阅的代码封装成可用的插件。

package com.hanhuizhu.forbidshot;
import android.util.Log;
import android.widget.Toast;
import android.view.WindowManager;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.List;
public class RNForbidShotModule extends ReactContextBaseJavaModule {
private final ReactApplicationContext reactContext;
public RNForbidShotModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactCOntext= reactContext;
}
@Override
public String getName() {
return "RNForbidShot";
}
@ReactMethod
public void setFlag() {
getCurrentActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
getCurrentActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE,
WindowManager.LayoutParams.FLAG_SECURE); // 禁止截屏
}
});
}
@ReactMethod
public void clearFlag() {
getCurrentActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
getCurrentActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SECURE); // 禁止截屏
}
});
}
}

使用

我把上面的代码打包发布了，大家可以直接使用，使用方法如下：

yarn add react-native-forbid-shot && react-native link react-native-forbid-shot

在相关组件中调用

import ForbidShot from 'react-native-forbid-shot';
....
componentDidMounted(){
ForbidShot. setFlag();
}
....
componentWillUnmount(){
ForbidShot. clearFlag();
}
....