在React Native App中禁用屏幕捕获/屏幕截图

imzjd6km  于 2023-06-30  发布在  React
关注(0)|答案(7)|浏览(314)

我遇到过一些专门针对iOS和Android的解决方案,以防止屏幕捕获和截图。但是我如何在react native中禁用屏幕捕获?

i7uq4tfw

i7uq4tfw1#

安卓

内部/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];
    }];
}
mdfafbf1

mdfafbf12#

因此,在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];
1.由于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

1.在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端的变化。
1.现在您需要在.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 ... /> 
  )
}

我愿意接受对这篇文章进行修改的建议。如果这篇文章对你有帮助的话,别忘了投赞成票。

xoefb8l8

xoefb8l83#

阻止截屏

  • 安卓系统 *

通过setFlag secure防止捕获屏幕

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

如果您想删除安全标志

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

gg58donl4#

在Android
/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);
    }
6tdlim6h

6tdlim6h5#

1.在appDelegate.m下面添加这行 didFinishLaunchingWithOptions 当用户正在屏幕记录退出应用程序时,如果屏幕记录在应用程序上未打开仅适用于ios react-native

0lvr5msh

0lvr5msh6#

screen shot false in your app把这个完整的代码放在你的
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
  );}}
svdrlsy4

svdrlsy47#

你可以使用我自己定制的react-native-screenguard库。
yarn add react-native-screenguard
npm i --save react-native-screenguard
指南:
https://github.com/gbumps/react-native-screenguard/blob/master/README.md

相关问题