Web Analytics
Nhảy tới nội dung

Bắt đầu

Thư viện React Native dùng mã native giúp ngăn chặn chụp ảnh màn hình và quay màn hình trong ứng dụng, với khả năng phát hiện sự kiện mạnh mẽ.

✨ Các tính năng chính​

🛡️ Ngăn chặn Chụp ảnh và Quay video màn hình​

Ngăn chặn nội dung nhạy cảm của ứng dụng bị chụp hoặc quay lại, với 3 loại lớp phủ riêng biệt:

  • Lớp phủ màu đơn sắc — Hiển thị một màu cố định (ví dụ: đen, trắng hoặc mã màu hex tùy chỉnh).
  • Hiệu ứng làm mờ (Blur) — Áp dụng lớp phủ làm mờ nội dung.
  • Hình ảnh tùy chỉnh — Hiển thị hình ảnh, logo hoặc watermark của riêng bạn khi nội dung màn hình bị chụp hoặc quay.

📸 Phát hiện Chụp ảnh màn hình​

Phát hiện sự kiện chụp màn hình theo thời gian thực, kích hoạt ngay khi ảnh màn hình được chụp:

  • Truy cập metadata của ảnh chụp — Lấy đường dẫn tệp của ảnh màn hình đã chụp trên thiết bị để dùng cho logic của bạn.
  • Kiểm soát sự kiện chụp màn hình — Giới hạn số lượng sự kiện chụp màn hình.
  • Theo dõi trạng thái — Kiểm tra ScreenGuard có đang hoạt động hay không khi sự kiện chụp màn hình xảy ra.

🎥 Phát hiện Quay video màn hình​

Theo dõi hoạt động quay màn hình theo thời gian thực.

  • Phát hiện trạng thái quay — Biết khi nào quá trình quay màn hình bắt đầu và kết thúc trên thiết bị.
  • Phản hồi các nỗ lực quay — Thực hiện các hành động tùy chỉnh khi phát hiện thấy hành động quay màn hình.
  • Hỗ trợ đa nền tảng — Hoạt động trên iOS 13+ và Android 15+ (API 35+).

📝 Ghi log hoạt động​

Ghi log toàn diện phục vụ audit hoặc gỡ lỗi.

Cách thức hoạt động​

React Native ScreenGuard kết nối mã nguồn native (iOS Objective-C, Android Java) và JavaScript, sử dụng FLAG_SECURE trên Android và lớp bảo vệ tùy chỉnh dựa trên UITextField trên iOS.

Điều kiện tiên quyết​

Nếu bạn đã quen thuộc với JavaScript, React và React Native, bạn sẽ có thể làm quen với React Native Screenguard rất nhanh chóng! Nếu chưa, chúng tôi khuyên bạn nên tìm hiểu một số kiến thức cơ bản trước, sau đó quay lại đây.

Dưới đây là một số tài nguyên giúp bạn:

  1. React Native Express (Phần 1 đến 4)
  2. Các khái niệm chính của React
  3. React Hooks
  4. Giới thiệu về Native module

Yêu cầu tối thiểu​

  • Phiên bản Node.js 16.0 trở lên:
    • Khi cài đặt Node.js, bạn nên tích chọn tất cả các ô liên quan đến dependencies.
  • react-native >= 0.59.0
  • react >= 16.8.3
  • expo >= 36.0.0
  • Android SDK >= 29
  • Cocoapods >= 1.1.4
  • iOS minimum deployment target >= 13
  • typescript >= 4.0.0