共计 4593 个字符，预计需要花费 12 分钟才能阅读完成。
首发于公众号 前端混合开发 ，欢送关注。
为用户启用屏幕截图性能曾经成为挪动利用中用户体验的重要局部。这项性能使用户可能保留或分享利用界面的以后状态，以记住一个难忘的时刻，与敌人分享成就，或向开发者报告问题。
在这篇文章中，咱们将摸索如何应用 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 中治理利用权限的指南。
交换
首发于公众号 大迁世界，欢送关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑难？我来答复
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
