首发于公众号 前端混合开发,欢送关注。

为用户启用屏幕截图性能曾经成为挪动利用中用户体验的重要局部。这项性能使用户可能保留或分享利用界面的以后状态,以记住一个难忘的时刻,与敌人分享成就,或向开发者报告问题。

在这篇文章中,咱们将摸索如何应用 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));

可用的格局有 pngjpgwebm 。当仅应用 jpg 格局时,你能够将屏幕捕获品质配置在 0.01.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 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。