So verhindern Sie, dass Screenshots in React Native aufgenommen werden

Screenshot-Verhinderung in der mobilen Anwendung

Hallo Leute, hier ist, wie man verhindert, dass Screenshots in der nativen Reaktion aufgenommen werden. Dieser Beitrag ist auf Wunsch vieler Leser entstanden, die mich gefragt haben, wie man die Screenshot-Erfassung speziell für iOS deaktivieren/verhindern kann.

Es kann viele Anwendungsfälle geben, in denen wir verhindern möchten, dass Screenshots in der React Native-App aufgenommen werden, wenn wir eine temporäre QR-Code-Generierungsfunktion haben, bei der der Benutzer keinen Screenshot machen möchte. Eine Sache, die hier erwähnt werden sollte, ist, dass Sie sich zum Schutz Ihrer Daten nicht vollständig auf diese Funktionalität verlassen sollten. Der Benutzer kann das Bild von einem anderen mobilen Gerät aufnehmen, also planen Sie die Dinge entsprechend.

Sehen wir uns an, wie Sie einen Benutzer steuern, um einen Screenshot für Android und iOS zu erstellen

Screenshot-Blockierung fOder Android-App

Das Android-System bietet einen integrierten Mechanismus zum Blockieren von Screenshots, die seit Android Honeycomb (3.0) verfügbar sind. In dem Prozess, den Sie verhindern möchten, dass ein Screenshot erstellt wird, ist ein Zeilencode erforderlich. Dadurch wird diese Funktionalität vollständig deaktiviert (statt eines Screenshots sieht der Benutzer eine nette Fehlermeldung). Darüber hinaus blockiert es alle Bildschirmaufzeichnungsoptionen (nur schwarzer Bildschirm als Ausgabe sichtbar), was ein großartiges Add-on ist.

Fügen Sie den folgenden Code hinzu, um die Bildschirmaufnahme zu verhindern

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

Hier sind die Schritte zum Steuern der Screenshot-Aufnahme in React Native-Apps (Android).

1. Öffnen your-project -> android -> app -> src -> main -> java -> com -> your-project-name -> MainActivity.java

2. Fügen Sie die folgenden Importe hinzu

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

3. Fügen Sie Folgendes hinzu Schaffen Funktion

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

Beachten Sie, dass gerootete Geräte diesen Mechanismus umgehen können. Möglicherweise müssen Sie ein gerootetes Gerät finden und Ihre App deaktivieren.

Screenshot ausgeben

Screenshot-Blockierung foder die iOS-App

Wenn wir über iOS sprechen, lassen Sie mich eines klarstellen: Wir haben alles versucht, was dort verfügbar ist, aber als Ergebnis können wir Benutzer nicht kontrollieren, Screenshots auf iOS zu machen, indem wir Code hinzufügen oder irgendeinen Hack verwenden.

Nachdem Sie sich einige weitere Dinge angesehen haben, gibt es eine Möglichkeit, die Details des aufgenommenen Screenshots abzurufen, aber er wird erst ausgelöst, nachdem der Benutzer den Screenshot aufgenommen hat.

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
      NotificationCenter.default.addObserver(
        forName: UIApplication.userDidTakeScreenshotNotification, 
        object: nil, queue: nil) { _ in
          print("Hey, You have captured a screenshot")
      }
  }
}

Mit dessen Hilfe erhalten wir nur die Details des aufgenommenen Screenshots, können diese aber nicht kontrollieren. Wir dachten, was wäre, wenn wir den aufgenommenen Screenshot nach dieser Aufforderung löschen, aber iOS erlaubt uns nicht, Dateien aus einer externen App zu löschen, also hat das nicht funktioniert.

Nachdem wir viele Dinge ausprobiert hatten, stellten wir fest, dass es keine Möglichkeit gibt, Screenshots für iOS zu steuern.

Wenn Sie 100% Schutz vor Screenshots auf iOS wünschen, können Sie ScreenShieldKit verwenden, ein kostenpflichtiges SDK, das Ihnen hilft, eine React Native App für iOS zu erstellen, die eine Ressource für Screenshots und Videoaufzeichnungen sein kann! Wir teilen keine weiteren Details über dieses SDK mit, da Sie Details auf ihrer Website finden können, aber dies ist die beste Option, die Sie bisher im Internet finden können.

Sie können das Aufnehmen von Screenshots verhindern und die Bildschirmaufnahme in React Native deaktivieren. Wenn Sie Zweifel haben oder etwas über das Thema mitteilen möchten, kommentieren Sie unten oder kontaktieren Sie uns hier. Weitere Beiträge folgen in Kürze. Warte ab!

Ich hoffe, es hat euch gefallen. 🙂