向React Native应用添加屏幕捕捉功能
首发于公众号 前端混合开发。
为用户启用屏幕截图功能已经成为移动应用中用户体验的重要部分。这项功能使用户能够保存或分享应用界面的当前状态，以记住一个难忘的时刻，与朋友分享成就，或向开发者报告问题。
在这篇文章中，我们将探索如何使用 react-native-view-shot 库在React Native应用中实现屏幕捕捉。这个库简化了对特定视图或整个屏幕截图的过程。
在这个教程中，我们将通过实际演示来展示这个库的功能。你可以在GitHub上查看我们简单演示应用的完整代码。
在React Native应用中使用屏幕捕捉的用例
在游戏应用中，提供屏幕截图功能可以让用户在社交媒体上与朋友分享他们的分数、完成的关卡和游戏内的成就。
在报告应用中的错误或问题时，用户可以截取他们的屏幕，以显示他们遇到问题时或由于问题导致的应用当前状态。这可以帮助应用维护者找到或复现问题。
用户还可以在电子商务应用、房地产应用或教育应用中截取诸如产品、房源或讲座幻灯片等内容的屏幕，与他人分享。
为什么使用 react-native-view-shot ？
react-native-view-shot 无疑是实现React Native应用屏幕捕捉功能的最佳维护库。它也高度可定制，因此你可以根据你的需求进行调整。
例如， react-native-record-screen 库记录用户的整个屏幕，而不是捕获特定视图。同时， react-native-screenshot-detect 库检查用户是否使用他们的设备截图，但只适用于用React Native构建的iOS应用。
如果你想要截取某个视图或整个屏幕的快照，我推荐使用 react-native-view-shot 。然而，如果你想要录制整个屏幕，那么请使用 react-native-record-screen 。
安装 react-native-view-shot
运行以下命令之一：
//npm
$ npm install react-native-view-shot --save
//Yarn
$ yarn add react-native-view-shot一旦安装完成，你需要构建一次应用。这是因为 react-native-view-shot 向应用添加了新的原生代码。
在构建完成并安装到你的设备上后，你可以开始在你的React Native应用中使用这个库来捕获屏幕或视图。
使用 react-native-view-shot
使用 react-native-view-shot 相当直接了当。我们稍后会进行更详细的演示，但首先，让我们看看这个库是如何工作的。
首先，从React和 react-native-view-shot 库中导入必要的组件：
import ViewShot from 'react-native-view-shot`;
import { useRef, useState } from "react";接下来，创建一个 viewShot 组件，并将其 useRef 设置为 null 。在此组件内渲染的任何内容都可以作为图像捕获：
然后，我们将创建一个状态来存储捕获的图像的URI：
const [uri, setUri] = useState("");现在创建一个函数来捕获 viewShot 组件的内容，并将结果URI保存到状态中：
const captureScreen = () => {
viewShot.current.capture().then((uri) => {
setUri(uri);
});
};最后，我们将使用存储在状态中的 uri 来显示捕获图像的预览：
<View style={styles.previewContainer}>
<Text>Preview</Text>
<Image
source={{ uri: uri }}
style={styles.previewImage}
resizeMode="contain"
/>
</View>react-native-view-shot 的实际演示
既然我们已经看到了 react-native-view-shot 是如何工作的，那么让我们探索一下如何在一个简单的React Native应用中完整地使用它。我们将实现这个库，允许用户在应用中捕获特定的视图，并显示捕获图像的预览：
import {
Dimensions,
Image,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import React from 'react';
import ViewShot from 'react-native-view-shot';
import {useRef, useState} from 'react';
const ScreenCapture = () => {
const viewShot = useRef(null);
const [uri, setUri] = useState('');
const captureScreen = () => {
viewShot.current.capture().then(uri => {
setUri(uri);
});
};
return (
<View style={styles.container}>
<ViewShot ref={viewShot} style={styles.viewShot}>
<View style={{width: 200, height: 200, backgroundColor: 'red'}} />
</ViewShot>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={captureScreen} style={styles.btn}>
<Text style={styles.btnTxt}>CAPTURE</Text>
</TouchableOpacity>
</View>
{uri ? (
<View style={styles.previewContainer}>
<Text>Preview</Text>
<Image
source={{uri: uri}}
style={styles.previewImage}
resizeMode="contain"
/>
</View>
) : null}
</View>
);
};
export default ScreenCapture;
const SCREEN_WIDTH = Dimensions.get('screen').width;
const styles = StyleSheet.create({
container: {
flex: 1,
},
viewShot: {
width: SCREEN_WIDTH,
height: SCREEN_WIDTH,
},
buttonContainer: {
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
},
btn: {
padding: 8,
},
btnTxt: {
fontSize: 20,
fontWeight: 'bold',
},
// previewContainer
previewContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
backgroundColor: '#000',
},
previewImage: {width: 200, height: 200, backgroundColor: '#fff'},
});在这个例子中，用户通过在应用内按下一个按钮来触发屏幕截图。以下是应用在 viewShot 被捕获之前的基本状态应该是什么样的：
捕获的图像将直接在应用程序内显示，而不是保存到设备的相机卷轴中。预览将如下所示:
如果用户想要重新拍摄图片，他们可以简单地再次按下CAPTURE按钮来替换之前的拍摄。
请记住， react-native-view-shot 不允许应用程序捕获整个屏幕，只能捕获 viewShot 组件内的内容。这意味着捕获视图的大小取决于 viewShot 组件的尺寸 - 在这种情况下，是CAPTURE按钮以上的屏幕部分。
你可以通过编辑 viewShot 组件的 styles 来改变这些尺寸。在这个例子中， viewShot 的宽度和高度是相等的，使我们能够在CAPTURE按钮下显示完整的预览。
当使用 react-native-view-shot 时，捕获的图像会存储在用户设备的临时存储中。你可以利用另一个第三方库，如react-native-camera-roll，让用户将捕获的图像保存到他们设备的相册中。
使用 react-native-view-shot 库的命令式API
react-native-view-shot 也提供了一个更低级别的命令式API，具有更多的可定制性。你可以使用此API设置捕获图像的格式和质量：
captureRef(viewRef, {
format: "jpg",
quality: 0.8,
}).then(
(uri) => console.log("Image can be accessed at: ", uri),
(error) => console.error("Snapshot failed", error)
);可用的格式有 png ， jpg 和 webm 。当仅使用 jpg 格式时，你可以将屏幕捕捉质量配置在 0.0 和 1.0 之间的值。
排查 react-native-view-shot 问题
虽然 react-native-view-shot 是在React Native应用中获取视图快照的最佳维护选项，但在该库的GitHub仓库中存在多个未解决的问题。有些问题仍在研究中，但让我们来看看下面最常遇到的问题。
当在React Native v0.72.0 中使用 react-native-view-shot 时，尝试截图会导致以下错误：
Failed to capture view snapshot这个库与React Native的早期版本完全兼容。例如，我们上面演示的示例是在React Native v0.71.8上设置和测试的。
对于v0.72.0，你可以通过将 collapsable 属性设置为 false 来解决这个问题，如下所示：
请注意，这是一个临时的解决方案，可能无法按预期工作。可以通过GitHub上的活跃问题来了解更多信息或检查更近期的更新。
总结
在这篇文章中，我们探讨了如何使用 react-native-view-shot 库在React Native应用中捕获屏幕或特定视图。你可以在GitHub上查看我们简单演示的完整代码。
启用用户捕获和分享应用内容可以增强用户参与度，改善错误报告，并实现各种创新和功能性的使用场景。请务必查阅 react-native-view-shot 库的文档，以获取最新的信息和额外功能。
另外，虽然这个库不需要直接访问用户的相机、麦克风或其他功能，但根据你的使用情况，你可能需要查看我们关于在React Native中管理应用权限的指南。