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

Ví dụ

Version 2.0.0+​

initSettings (Quan trọng)​

Bạn bắt buộc phải gọi initSettings() một lần trước khi sử dụng bất kỳ API ScreenGuard nào khác. Mỗi tham số dưới đây có ví dụ riêng.

enableCapture & enableRecord​

Các tổ hợp để điều khiển độc lập việc chụp và quay màn hình.

// Cho phép chụp màn hình, chặn quay màn hình
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: false,
});

// Cho phép quay màn hình, chặn chụp màn hình
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: true,
});

// Chặn cả chụp và quay màn hình (phổ biến nhất)
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
});

// Cho phép cả hai (ví dụ: cho màn hình review/demo)
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
});

enableContentMultitask (iOS)​

Kết hợp với enableCapture / enableRecord để điều khiển hiển thị trong App Switcher.

// Cho phép chụp & quay màn hình, nhưng ẩn nội dung trong App Switcher
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
  enableContentMultitask: false,
});

// Chặn chụp & quay màn hình, nhưng giữ nội dung hiển thị trong App Switcher
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
  enableContentMultitask: true,
});

displayScreenGuardOverlay (iOS)​

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true, // hiển thị overlay khi chụp/quay màn hình
  timeAfterResume: 2000,
});

displayScreenguardOverlayAndroid (Android)​

await ScreenGuardModule.initSettings({
  displayScreenguardOverlayAndroid: true, // hiển thị overlay khi quay lại từ background
});

timeAfterResume​

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true,
  timeAfterResume: 2000, // overlay hiển thị trong 2 giây
});

getScreenshotPath​

await ScreenGuardModule.initSettings({
  getScreenshotPath: true, // bao gồm đường dẫn tệp trong screenshotData
});

limitCaptureEvtCount​

await ScreenGuardModule.initSettings({
  limitCaptureEvtCount: 3, // chỉ phát sự kiện cho 3 ảnh chụp đầu tiên
});

trackingLog​

await ScreenGuardModule.initSettings({
  trackingLog: true, // bật ghi log hoạt động
});

Ví dụ tổng hợp​

import React, { useEffect } from 'react';
import ScreenGuardModule from 'react-native-screenguard';

export default function App() {
  useEffect(() => {
    ScreenGuardModule.initSettings({
      displayScreenGuardOverlay: true,
      timeAfterResume: 2000,
      getScreenshotPath: true,
      trackingLog: true,
    });

    return () => {
      ScreenGuardModule.unregister();
    };
  }, []);

  // ...
}

Đăng ký với Màu sắc​

Kích hoạt ScreenGuard với overlay màu đặc (ví dụ: màu đỏ Google #DB4437).

await ScreenGuardModule.register({
  backgroundColor: '#DB4437',
});

Đăng ký với Làm mờ​

Kích hoạt ScreenGuard với hiệu ứng làm mờ, bán kính 35.

await ScreenGuardModule.registerWithBlurView({
  radius: 35,
});

Đăng ký với Hình ảnh​

Hiển thị hình ảnh tùy chỉnh kèm overlay màu nền.

// Hình ảnh từ mạng
await ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4, // center
});

// Hình ảnh local
await ScreenGuardModule.registerWithImage({
  source: require('./assets/logo.png'),
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
});

Đăng ký một phần MỚI ✨​

Chỉ che một vùng view cụ thể (chỉ iOS, v2.0.2+).

import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import ScreenGuardModule from 'react-native-screenguard';

export default function App() {
  const sensitiveRef = useRef<View>(null);

  const enablePartialGuard = async () => {
    await ScreenGuardModule.registerScreenguardPartially({
      viewRef: sensitiveRef,
      backgroundColor: '#000000',
    });
  };

  return (
    <View>
      <View ref={sensitiveRef}>
        <Text>Nội dung này sẽ bị che trong ảnh chụp màn hình</Text>
      </View>
      <Button title="Bật Guard" onPress={enablePartialGuard} />
    </View>
  );
}

Hủy đăng ký​

await ScreenGuardModule.unregister();

Lắng nghe sự kiện chụp màn hình (Hook)​

import { useSGScreenShot } from 'react-native-screenguard';

function MyComponent() {
  const { screenshotData, activationStatus } = useSGScreenShot((event) => {
    console.log('Đã phát hiện chụp màn hình:', event.name);
  });

  return (
    <View>
      <Text>Bảo vệ: {activationStatus?.isActivated ? 'Đang bật' : 'Đang tắt'}</Text>
      <Text>Ảnh chụp gần nhất: {screenshotData?.name || 'Không có'}</Text>
    </View>
  );
}

Lắng nghe sự kiện quay màn hình (Hook)​

import { useSGScreenRecord } from 'react-native-screenguard';

function MyComponent() {
  const { recordingData } = useSGScreenRecord((event) => {
    if (event.isRecording) {
      console.log('Đã bắt đầu quay màn hình!');
    }
  });

  return (
    <Text>Đang quay: {recordingData?.isRecording ? 'Có' : 'Không'}</Text>
  );
}

Version <= 1.1.1​

initSettings() không tồn tại trong v1.x. Bạn có thể gọi trực tiếp các hàm register.

Hỗ trợ Promise

Các hàm register trả về Promise từ v1.0.8+ — có thể dùng await hoặc .then(). Với các phiên bản dưới 1.0.8, các hàm trả về ngay lập tức mà không có Promise.

Đăng ký với Màu sắc​

import ScreenGuardModule from 'react-native-screenguard';

// v1.0.8+ (async/await)
await ScreenGuardModule.register({
  backgroundColor: '#DB4437', // màu đỏ Google
  timeAfterResume: 1000,
});

// v1.0.8+ (Promise .then)
ScreenGuardModule.register({
  backgroundColor: '#DB4437',
  timeAfterResume: 1000,
}).then(() => {
  console.log('Đã đăng ký');
}).catch((err) => {
  console.error(err);
});

// v < 1.0.8 (không hỗ trợ Promise)
ScreenGuardModule.register({
  backgroundColor: '#DB4437',
  timeAfterResume: 1000,
});

Đăng ký với Làm mờ​

// v1.0.8+ (async/await)
await ScreenGuardModule.registerWithBlurView({
  radius: 35,
  timeAfterResume: 1000,
});

// v1.0.8+ (Promise .then)
ScreenGuardModule.registerWithBlurView({
  radius: 35,
  timeAfterResume: 1000,
}).then(() => console.log('Đã đăng ký'));

// v < 1.0.8
ScreenGuardModule.registerWithBlurView({
  radius: 35,
  timeAfterResume: 1000,
});

Hủy đăng ký​

// v1.0.8+ (async/await)
await ScreenGuardModule.unregister();

// v1.0.8+ (Promise .then)
ScreenGuardModule.unregister().then(() => console.log('Đã hủy đăng ký'));

// v < 1.0.8
ScreenGuardModule.unregister();

Đăng ký với Hình ảnh​

// v1.0.8+ (async/await)
await ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4,
  timeAfterResume: 1000,
});

// v1.0.8+ (Promise .then)
ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4,
  timeAfterResume: 1000,
}).then(() => console.log('Đã đăng ký'));

// v < 1.0.8
ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4,
  timeAfterResume: 1000,
});

Lắng nghe sự kiện chụp màn hình​

import ScreenGuardModule from 'react-native-screenguard';

ScreenGuardModule.registerScreenshotEventListener(true, (data) => {
  if (data != null) {
    console.log('path:', data.path);
    console.log('name:', data.name);
    console.log('type:', data.type);
  }
});

// Dọn dẹp
ScreenGuardModule.removeScreenshotEventListener();

Lắng nghe sự kiện quay màn hình​

import ScreenGuardModule from 'react-native-screenguard';

// Chỉ iOS
ScreenGuardModule.registerScreenRecordingEventListener(() => {
  console.log('Quay màn hình đã kết thúc');
});

// Dọn dẹp
ScreenGuardModule.removeRecordingEventListener();

Class Component (Legacy)​

Dành cho React Native < 0.59.

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import ScreenGuardModule from 'react-native-screenguard';

// v1.0.8+ hỗ trợ async/await. Với v < 1.0.8, hãy bỏ async/await.
class App extends Component {
  componentDidMount() {
    ScreenGuardModule.registerScreenshotEventListener(true, (data) => {
      console.log('Ảnh chụp:', data?.name);
    });
  }

  componentWillUnmount() {
    ScreenGuardModule.removeScreenshotEventListener();
    ScreenGuardModule.unregister();
  }

  activateWithColor = async () => {
    await ScreenGuardModule.register({
      backgroundColor: '#DB4437',
      timeAfterResume: 1000,
    });
  };

  activateWithBlur = async () => {
    await ScreenGuardModule.registerWithBlurView({
      radius: 35,
      timeAfterResume: 1000,
    });
  };

  deactivate = async () => {
    await ScreenGuardModule.unregister();
  };

  render() {
    return (
      <View>
        <Text>Nội dung nhạy cảm</Text>
        <Button title="Màu sắc" onPress={this.activateWithColor} />
        <Button title="Làm mờ" onPress={this.activateWithBlur} />
        <Button title="Hủy kích hoạt" onPress={this.deactivate} />
      </View>
    );
  }
}

export default App;