在 React Native App 中禁用屏幕截圖/屏幕截圖

Question

我遇到了一些特定於 ios 和 Android 的解決方案，以防止屏幕捕獲和截屏。 但是如何在 React Native 中禁用屏幕捕獲？

Answer 1

安卓

里面/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 包來播放媒體。 如果用戶啟用了屏幕錄制，我的要求是顯示微調器。

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 允許與 Native 模塊通信，我決定添加橋接器，以便在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

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

並添加[[UIScreen mainScreen] addObserver:self forKeyPath:@"captured" options:NSKeyValueObservingOptionNew context:nil]; 在didFinishLaunchingWithOptions 。 iOS 端的更改到此結束。

4. 現在您需要在 .js 文件中添加 Listener 以通知 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

防止捕獲屏幕

安卓

通過 setFlag secure 防止捕獲屏幕

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

如果要刪除標志安全

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

Answer 4

在安卓中

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

寫一些導入語句

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

通過在 MainActivity 類中的代碼下方安全使用 setFlag 防止捕獲屏幕

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

Answer 5

1. 當用戶是屏幕記錄退出應用程序時，如果屏幕記錄在應用程序上，則在didFinishLaunchingWithOptions下面的appDelegate.m 中添加此行，如果屏幕記錄在應用程序上，則不只為 ios react-native打開

Answer 6

我創建了一個庫來處理 IOS 和 Android 禁用屏幕截圖功能

https://www.npmjs.com/package/react-native-screenshot-prevention