Web Analytics
跳到主要内容

示例

Version 2.0.0+​

initSettings (重要)​

在使用任何其他 ScreenGuard API 之前，您必须调用一次 initSettings()。下面针对每个参数给出示例。

enableCapture & enableRecord​

独立控制截屏和录屏的组合。

// 允许截屏，阻止录屏
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: false,
});

// 允许录屏，阻止截屏
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: true,
});

// 阻止截屏和录屏（最常见）
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
});

// 全部允许（例如用于审核/演示界面）
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
});

enableContentMultitask (iOS)​

与 enableCapture / enableRecord 组合使用，控制应用切换器中的可见性。

// 允许截屏和录屏，但在应用切换器中隐藏内容
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
  enableContentMultitask: false,
});

// 阻止截屏和录屏，但在应用切换器中保留内容可见
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
  enableContentMultitask: true,
});

displayScreenGuardOverlay (iOS)​

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true, // 截屏/录屏期间显示覆盖层
  timeAfterResume: 2000,
});

displayScreenguardOverlayAndroid (Android)​

await ScreenGuardModule.initSettings({
  displayScreenguardOverlayAndroid: true, // 从后台返回时显示覆盖层
});

timeAfterResume​

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true,
  timeAfterResume: 2000, // 覆盖层显示 2 秒
});

getScreenshotPath​

await ScreenGuardModule.initSettings({
  getScreenshotPath: true, // 在 screenshotData 中包含文件路径
});

limitCaptureEvtCount​

await ScreenGuardModule.initSettings({
  limitCaptureEvtCount: 3, // 仅对前 3 次截屏触发事件
});

trackingLog​

await ScreenGuardModule.initSettings({
  trackingLog: true, // 启用活动日志记录
});

综合示例​

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();
    };
  }, []);

  // ...
}

使用颜色注册​

使用纯色覆盖层激活 ScreenGuard（例如 Google 红色 #DB4437）。

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

使用模糊注册​

使用模糊效果（半径 35）激活 ScreenGuard。

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

使用图像注册​

显示自定义图像并配合背景色覆盖层。

// 网络图像
await ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4, // center
});

// 本地图像
await ScreenGuardModule.registerWithImage({
  source: require('./assets/logo.png'),
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
});

部分注册 新增 ✨​

仅遮盖特定视图区域（仅限 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>此内容将在截图中被遮盖</Text>
      </View>
      <Button title="启用 Guard" onPress={enablePartialGuard} />
    </View>
  );
}

取消注册​

await ScreenGuardModule.unregister();

监听截屏事件 (Hook)​

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

function MyComponent() {
  const { screenshotData, activationStatus } = useSGScreenShot((event) => {
    console.log('检测到截屏:', event.name);
  });

  return (
    <View>
      <Text>保护状态: {activationStatus?.isActivated ? '已激活' : '未激活'}</Text>
      <Text>最后一次截屏: {screenshotData?.name || '无'}</Text>
    </View>
  );
}

监听录屏事件 (Hook)​

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

function MyComponent() {
  const { recordingData } = useSGScreenRecord((event) => {
    if (event.isRecording) {
      console.log('录屏已开始！');
    }
  });

  return (
    <Text>正在录屏: {recordingData?.isRecording ? '是' : '否'}</Text>
  );
}

Version <= 1.1.1​

v1.x 中没有 initSettings()。您可以直接调用 register 方法。

Promise 支持

从 v1.0.8+ 开始，register 函数返回 Promise — 可以使用 await 或 .then()。对于 1.0.8 以下的版本，这些函数会立即返回，不返回 Promise。

使用颜色注册​

import ScreenGuardModule from 'react-native-screenguard';

// v1.0.8+ (async/await)
await ScreenGuardModule.register({
  backgroundColor: '#DB4437', // Google 红色
  timeAfterResume: 1000,
});

// v1.0.8+ (Promise .then)
ScreenGuardModule.register({
  backgroundColor: '#DB4437',
  timeAfterResume: 1000,
}).then(() => {
  console.log('已注册');
}).catch((err) => {
  console.error(err);
});

// v < 1.0.8 (不支持 Promise)
ScreenGuardModule.register({
  backgroundColor: '#DB4437',
  timeAfterResume: 1000,
});

使用模糊注册​

// 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('已注册'));

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

取消注册​

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

// v1.0.8+ (Promise .then)
ScreenGuardModule.unregister().then(() => console.log('已取消注册'));

// v < 1.0.8
ScreenGuardModule.unregister();

使用图像注册​

// 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('已注册'));

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

监听截屏事件​

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

// 清理
ScreenGuardModule.removeScreenshotEventListener();

监听录屏事件​

import ScreenGuardModule from 'react-native-screenguard';

// 仅限 iOS
ScreenGuardModule.registerScreenRecordingEventListener(() => {
  console.log('录屏已结束');
});

// 清理
ScreenGuardModule.removeRecordingEventListener();

类组件 (Legacy)​

适用于 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+ 支持 async/await。对于 v < 1.0.8，请移除 async/await。
class App extends Component {
  componentDidMount() {
    ScreenGuardModule.registerScreenshotEventListener(true, (data) => {
      console.log('截屏:', 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>敏感内容</Text>
        <Button title="颜色" onPress={this.activateWithColor} />
        <Button title="模糊" onPress={this.activateWithBlur} />
        <Button title="停用" onPress={this.deactivate} />
      </View>
    );
  }
}

export default App;