禁用React Native App中的屏幕截图/屏幕截图

Question

我遇到了一些针对iOS和Android的解决方案，以防止屏幕捕获和拍摄屏幕截图。但是如何在React Native中禁用屏幕捕获？

Answer 1

android

内部/android/app/src/main/java/com/{Project_Name}/MainActivity.java

您可以添加以下行。通过SetFlag FLAG_SECURE防止捕获屏幕，以下面的代码为例：

import android.os.Bundle;
import android.view.WindowManager;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);
}

以后要删除安全标志

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

ios

AppDelegate.m中的覆盖屏幕，以此示例：

- (void)applicationWillResignActive:(UIApplication *)application {    
    // fill screen with our own colour
    UIView *colourView = [[UIView alloc]initWithFrame:self.window.frame];
    colourView.backgroundColor = [UIColor whiteColor];
    colourView.tag = 1234;
    colourView.alpha = 0;
    [self.window addSubview:colourView];
    [self.window bringSubviewToFront:colourView];
    // fade in the view
    [UIView animateWithDuration:0.5 animations:^{
        colourView.alpha = 1;
    }];
}
- (void)applicationDidBecomeActive:(UIApplication *)application {
    // grab a reference to our coloured view
    UIView *colourView = [self.window viewWithTag:1234];
    // fade away colour view from main view
    [UIView animateWithDuration:0.5 animations:^{
        colourView.alpha = 0;
    } completion:^(BOOL finished) {
        // remove when finished fading
        [colourView removeFromSuperview];
    }];
}

Answer 2

，因此在React Native平台上构建的iOS侧几乎没有工作。因此，请耐心等待阅读以下方法。

我正在使用React-Native-Video软件包来播放媒体。我的要求是显示Spinner如果用户启用了屏幕录制。

1. 来自https://developer.apple.com/documentation/uikit/uiscreen/2921651-captured?language=Objc我知道captured属性设置为YES。我在appdelegate.m中添加了观察者，在 didFinishLaunchingWithOptions方法下。

   [[UIScreen mainScreen] addObserver:self forKeyPath:@"captured" options:NSKeyValueObservingOptionNew context:nil];

2. 由于RN允许与本机模块进行通信，因此我决定添加桥梁，因此何时将capture标志设置为是。

我创建了两个文件screenrecordingNotification.h和.m

.h

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
#ifndef ScreenCaptureNotification_h
#define ScreenCaptureNotification_h

@interface ScreenCaptureNotification : RCTEventEmitter <RCTBridgeModule>
-(void) isScreenCaptureEnabled:(BOOL)isCaptured;
@end
#endif /* ScreenCaptureNotification_h */

和.m看起来像

#import <Foundation/Foundation.h>
#import "ScreenCaptureNotification.h"
#import <React/RCTLog.h>
@implementation ScreenCaptureNotification
+ (id)allocWithZone:(NSZone *)zone {
  static ScreenCaptureNotification *sharedInstance = nil;
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    sharedInstance = [super allocWithZone:zone];
  });
  return sharedInstance;
}
RCT_EXPORT_MODULE();
- (NSArray<NSString *> *)supportedEvents {
  return @[           
           @"isScreenCaptureEnabled"];
}
-(void) isScreenCaptureEnabled:(BOOL)isCaptured {
  [self sendEventWithName:@"isScreenCaptureEnabled" body:@{@"value": @(isCaptured)}];
}
@end

3. 在AppDelegate中导入#import "ScreenCaptureNotification.h"并添加了以下方法。

   - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
       if ([keyPath isEqualToString:@"captured"]){
         NSLog(@"Screen Capture is Enabled");
         RCTLog(@"Screen Capture is Enabled");
         if (@available(iOS 11.0, *)) {
           ScreenCaptureNotification *manager = [ScreenCaptureNotification allocWithZone: nil];
           [manager isScreenCaptureEnabled:UIScreen.mainScreen.isCaptured];
         }
       }
   }
   

，还会在didFinishLaunchingWithOptions中添加[[UIScreen mainScreen] addObserver:self forKeyPath:@"captured" options:NSKeyValueObservingOptionNew context:nil];。这在iOS方面结论。

4. 现在，您需要在.js文件中添加侦听器以进行iOS发送的通知。一旦收到通知，就可以决定该怎么做。大致看起来像下面。

  addListener() {  
    let bridge = new NativeEventEmitter(NativeModules.ScreenCaptureNotification);
    this.screenCaptureEnabled = bridge.addListener("isScreenCaptureEnabled",res => { 
      this.setState({ screenCapture: true })
    })
  }

和

render() {
  if (this.state.screenCapture) {
     //Show spinner
     return <Spinner />
  }
  return (
  <Vido uri ... /> 
  )
}

我愿意提出更改这篇文章的建议。不要忘记投票给您是否有帮助。

Answer 3

防止捕获屏幕

android

通过SetFlag安全捕获屏幕

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

如果要删除标志安全

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

Answer 4

在Android

中

/android/app/src/main/java/com/{project_name}/mainactivity.java

写一些导入语句

import android.os.Bundle;
import android.view.WindowManager;

通过setFlag安全使用MainActivity类内的代码

中的SETFLAG捕获屏幕

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);
    }

Answer 5

1. 在appdelegate.m中添加此行 didfinishlaunchingwithoptions 当用户为屏幕记录退出应用程序以及屏幕记录是否在应用程序上不打开时仅适用于iOS React-Native

Answer 6

屏幕截图在您的应用中false false将此完整的代码放在您的

中

android/app/src/main/javacom/mainActivity/java

package com.Yourprojectname;
import com.facebook.react.ReactActivity;
import android.os.Bundle;
import android.view.WindowManager;

public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "YOUR PROJECT NAME";
  }
   
  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_SECURE,
    WindowManager.LayoutParams.FLAG_SECURE
  );}}

Answer 7

您可以使用我自己的定制库react-native-screenguard。

yarn add react-native-screenguard

npm i --save react-native-screenguard

指南：

https://github.com/gbumps/react-native-native-screenguard/blob/master/master/readme.md