Expo ScreenCapture

一个库，可让你保护应用中的屏幕不被捕获或记录。

expo-screen-capture 允许你保护应用中的屏幕不被捕获或记录，并在你的应用处于前台时截取屏幕截图时收到通知。你可能想要阻止屏幕捕获的两个最常见原因是：

¥expo-screen-capture allows you to protect screens in your app from being captured or recorded, as well as be notified if a screenshot is taken while your app is foregrounded. The two most common reasons you may want to prevent screen capture are:

• 如果屏幕显示敏感信息（密码、信用卡数据等）

  ¥If a screen is displaying sensitive information (password, credit card data, and so on)

• 你正在显示你不希望被记录和共享的付费内容

  ¥You are displaying paid content that you don't want to be recorded and shared

这在 Android 上尤其重要，因为 android.media.projection API 允许第三方应用执行屏幕捕获或屏幕共享（即使应用位于后台）。

¥This is especially important on Android since the android.media.projection API allows third-party apps to perform screen capture or screen sharing (even if the app is in the background).

在 Android 上，屏幕捕获回调仅适用于 Android 14+，无需额外权限。你无需请求或检查阻止屏幕截图或在 Android 14+ 上使用回调的权限。

¥On Android, the screen capture callback works without additional permissions only for Android 14+. You don't need to request or check permissions for blocking screen capture or using the callback on Android 14+.

如果你想在 Android 13 或更低版本上使用屏幕截图回调，则需要将 READ_MEDIA_IMAGES 权限添加到 AndroidManifest.xml 文件中。你可以在应用配置中使用 android.permissions 键。请参阅 Android 权限 了解更多信息。

¥If you want to use the screen capture callback on Android 13 or lower, you need to add the READ_MEDIA_IMAGES permission to your AndroidManifest.xml file. You can use the android.permissions key in your app config. See Android permissions for more information.

只能为需要广泛访问照片的应用添加 READ_MEDIA_IMAGES 权限。参见 Google Play 照片和视频权限政策详情。

目前，iOS 上的截图是无法阻止的。这是由于底层操作系统的限制。

安装

¥Installation

If you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.

用法

¥Usage

示例：hook

¥Example: hook

import { usePreventScreenCapture } from 'expo-screen-capture';
import { Text, View } from 'react-native';

export default function ScreenCaptureExample() {
usePreventScreenCapture();

return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>As long as this component is mounted, this screen is unrecordable!</Text>
  </View>
);
}

示例：强制阻止屏幕截图

¥Example: Blocking screen capture imperatively

import * as ScreenCapture from 'expo-screen-capture';
import { useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';

export default function ScreenCaptureExample() {
const activate = async () => {
  await ScreenCapture.preventScreenCaptureAsync();
};

const deactivate = async () => {
  await ScreenCapture.allowScreenCaptureAsync();
};

return (
  <View style={styles.container}>
    <Button title="Activate" onPress={activate} />
    <Button title="Deactivate" onPress={deactivate} />
  </View>
);
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
},
});

示例：屏幕截图回调

¥Example: Callback for screen capture

import * as ScreenCapture from 'expo-screen-capture';
import { useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';

export default function useScreenCaptureCallback() {
// Only use this if you add the READ_MEDIA_IMAGES permission to your AndroidManifest.xml
const hasPermissions = async () => {
  const { status } = await ScreenCapture.requestPermissionsAsync();
  return status === 'granted';
};

useEffect(() => {
  let subscription;

  const addListenerAsync = async () => {
    if (await hasPermissions()) {
      subscription = ScreenCapture.addScreenshotListener(() => {
        alert('Thanks for screenshotting my beautiful app 😊');
      });
    } else {
      console.error('Permissions needed to subscribe to screenshot events are missing!');
    }
  };
  addListenerAsync();

  return () => {
    subscription?.remove();
  };
}, []);
}

API

import * as ScreenCapture from 'expo-screen-capture';

Hooks

const [status, requestPermission] = ScreenCapture.usePermissions();

Methods

Event Subscriptions

let mySubscription = addScreenshotListener(() => {
  console.log("You took a screenshot!");
});
...
mySubscription.remove();
// OR
removeScreenshotListener(mySubscription);

Interfaces

Types

Enums