Блог

Я наткнулся на несколько решений, специфичных для ios и Android, для предотвращения захвата экрана и создания скриншотов. Но как мне отключить захват экрана в react native?

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

Таким образом, для сборки iOS на платформе React Native остается мало работы. Поэтому наберитесь терпения и ознакомьтесь со следующим подходом.

Я использую пакет react-native-video для воспроизведения мультимедиа. Моим требованием было показать счетчик, если у пользователя включена запись экрана.

1. Из https://developer.apple.com/documentation/uikit/uiscreen/2921651-captured ?language=objc я понял, что captured для этого свойства установлено значение YES. Я добавил observer в AppDelegate.m в didFinishLaunchingWithOptions методе.

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

2. Поскольку RN позволяет взаимодействовать с собственными модулями, я решил добавить bridge, чтобы уведомлять, когда 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(amp;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. импортировал #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]; в didFinishLaunchingWithOptions .
На этом изменения на стороне 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 ... /> 
  )
}
  

Я открыт для предложений по внесению изменений в этот пост. Не забудьте проголосовать, если этот пост помог вам.

Запретить захват экрана

Android

Запретить захват экрана, установив флаг secure

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

Если вы хотите удалить флаг secure

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

В Android

/android/app/src/main/java/com/{имя_проекта}/MainActivity.java

напишите несколько инструкций импорта

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

Запретить захват экрана, установив флаг безопасное использование приведенного ниже кода внутри класса MainActivity

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

1. Добавьте эти строки в AppDelegate.m ниже didFinishLaunchingWithOptions, когда пользователь с записью экрана выходит из приложения, и если запись экрана в приложении не открыта только для ios react-native

снимок экрана 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
  );}}