Question

我遇到了几种专门针对ios和Android的解决方案，以防止屏幕捕获和截屏。但是，如何在React Native中禁用屏幕捕获？

Answer 1

因此，在React Native平台上构建iOS端的工作很少。所以请耐心阅读以下方法。

我正在使用react-native-video软件包播放媒体。我的要求是，如果用户启用了屏幕录制，则显示微调框。

从https://developer.apple.com/documentation/uikit/uiscreen/2921651-captured?language=objc起，我了解到captured属性设置为YES。我在didFinishLaunchingWithOptions方法下的AppDelegate.m中添加了观察者。

[[UIScreen mainScreen] addObserver:self forKeyPath:@"captured" options:NSKeyValueObservingOptionNew context:nil];
由于RN允许与本机模块通信，所以我决定添加网桥，以便在capture标志设置为YES时通知。

我创建了两个文件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

在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];
      }
    }
}

并在[[UIScreen mainScreen] addObserver:self forKeyPath:@"captured" options:NSKeyValueObservingOptionNew context:nil];中添加didFinishLaunchingWithOptions。到此结束iOS方面的更改。

现在，您需要在.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 2

防止捕获屏幕

Android

通过setFlag安全防止捕获屏幕

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

如果您要删除安全标记

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

Answer 3

在android中，通过setFlag安全阻止捕获屏幕

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 4

在android

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

写一些导入语句

<transactions>
   <transaction>
      <number>12</number>
      <line>1</line>
   </transaction>
   <transaction>
      <number>12</number>
      <line>2</line>
   </transaction>
   <transaction>
      <number>13</number>
      <line>1</line>
   </transaction>
   <transaction>
      <number>13</number>
      <line>2</line>
   </transaction>
   <transaction>
      <number>14</number>
      <line>1</line>
   </transaction>
   <transaction>
      <number>14</number>
      <line>2</line>
   </transaction>
   <transaction>
      <number>14</number>
      <line>3</line>
   </transaction>
</transactions>

通过setFlag防止捕获屏幕安全使用MainActivity类中的以下代码

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

在React Native App中禁用Screen Capture / ScreenShot

4 个答案: