编写react-native 禁止截图插件

插件地址

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();
}
....