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

IT技术 android ios reactjs react-native screenshot
2021-04-22 17:50:14

我遇到了一些特定于 ios 和 Android 的解决方案,以防止屏幕捕获和截屏。但是如何在 React Native 中禁用屏幕捕获?

6个回答

安卓

里面 /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];
    }];
}
import android.os.Bundle; 在android的顶部添加这一行
2021-05-31 17:50:14
你能解释一下 iOS 解决方案的作用吗?在我的应用程序上,它只会使应用程序淡入白屏,使应用程序从后台“不可截图”,但您仍然可以在应用程序内进行屏幕截图
2021-06-01 17:50:14
此解决方案仅在应用程序处于后台时有效。对我而言,当用户截屏时不会调用 applicationWillResignActive
2021-06-06 17:50:14
例如,如果转到安全消息屏幕截图不可用,则如何处理此问题,否则应该可用。
2021-06-19 17:50:14

所以在 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 module通信,我决定添加桥接器,以便在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. #import "ScreenCaptureNotification.h"在 AppDelegate 中导入并添加以下方法。

    - (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];didFinishLaunchingWithOptionsiOS 端的更改到此结束。

  1. 现在您需要在 .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 ... /> 
  )
}

我愿意接受对这篇文章进行更改的建议。如果这篇文章对您有帮助,请不要忘记点赞。

@Naren 我试过你的解决方案,但它不起作用,你能在功能组件中分享 react-native 端的代码吗
2021-05-27 17:50:14
@vijaykahar 明白这一点。React Native 和 iOS 可以使用桥进行通信。当你从 iOS 接收到 React Native 的标志时,你在 redux 中设置了标志,这会强制应用程序重新渲染。在 react 的类文件中,添加 mapStateToProps 以从 redux 获取更新的值。我不能分享代码,但如果你分享你的代码,我可以检查一下。
2021-06-05 17:50:14
@DhruvilShah 你应该试试。我尝试进行屏幕录制并按预期工作。
2021-06-07 17:50:14
显示最近的问题未定义符号:_OBJC_CLASS_$_ScreenCaptureNotification 在 Xcode 12.2 上出现此错误
2021-06-16 17:50:14
如果用户尝试截取屏幕截图,捕获属性是否为真?
2021-06-20 17:50:14

防止捕获屏幕

安卓

通过 setFlag secure 防止捕获屏幕

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

如果你想删除标志安全

getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SECURE);
@BurimSyla 查看我的答案以获取应放置该代码行的确切位置。
2021-06-04 17:50:14
你至少可以提到我们应该把那行代码放在哪里。
2021-06-10 17:50:14
这个答案不够清楚,您没有说明我们应该在何处插入该行代码!
2021-06-17 17:50:14
感谢回复。IOS呢?
2021-06-19 17:50:14

在安卓中

/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);
    }
  1. 当用户是屏幕记录退出应用程序时,如果屏幕记录在应用程序上,则didFinishLaunchingWithOptions下面的appDelegate.m 中添加此行, 如果屏幕记录在应用程序上,则不是仅为 ios react-native打开