React-Native之截圖組件react-native-view-shot怎么用

這篇文章主要為大家展示了“React-Native之截圖組件react-native-view-shot怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“React-Native之截圖組件react-native-view-shot怎么用”這篇文章吧。

一、現象

1、需求：把某展示頁面進行截取保存到相冊、并可進行以海報的形式分享出去；

2、支持iOS和安卓

二、解決

1、安裝： npm i --save react-native-view-shot

2、進行鏈接處理：react-native link react-native-view-shot

3、當為IOS時執行還需要執行一下命令（安卓不用）：cd ios && pod install && cd ..

4、使用：

（1）、引用：

import { captureRef } from "react-native-view-shot";

（2）、模板：

　<View ref="shareImageRef">這里為需要展示的內容</View>

（3）、方法：

// 獲得截取后的圖片鏈接

doDownLoadImage = () => {
　　captureRef(this.refs.shareImageRef, {
　　　　format: "jpg",
　　　　quality: 0.8
　　}).then(
　　　　uri => {

　　　　　　console.error("鏈接為：", uri)

　　　　},
　　　　error =>  {

　　　　　　console.error("錯誤信息為：", error)

　　　　} 
　　);
}

// 進化方法，獲得截取后的圖片鏈接進行保存處理到相冊處理

doDownLoadImage = () => {
　　captureRef(this.refs.shareImageRef, {
　　　　format: "jpg",
　　　　quality: 0.8
　　}).then(
　　　　uri => {

　　　　　　console.error("鏈接為：", uri)　

　　　　　　let promise = CameraRoll.saveToCameraRoll(uri);
　　　　　　promise
　　　　　　.then((result) => {
　　　　　　　　alert('保存成功!');
　　　　　　})
　　　　　　.catch((error) => {
　　　　　　　　alert('保存失敗!');
　　　　　　});

　　　　},
　　　　error =>  {

　　　　　　console.error("錯誤信息為：", error)

　　　　} 
　　);
}

注：保存引用了(自行安裝): import CameraRoll from '@react-native-community/cameraroll';

// 把生成的鏈接轉化為 base64,處理為可分享的鏈接

doShareImg = () => {
　　captureRef(this.refs.shareImageRef, {
　　　　format: "jpg",
　　　　quality: 0.8
　　}).then(
　　　　uri => {

　　　　　　console.error("鏈接為：", uri)　　　

　　　　　　RNFS.readFile(uri, 'base64')
　　　　　　.then((content) => {

　　　　　　　　// 分享的海報圖地址為：

　　　　　　　　const link = 'data:image/png;base64,' + content

　　　　　　　　console.log("分享的海報圖地址為" + link)
　　　　　　})
　　　　　　.catch((err) => {
　　　　　　　　console.log("reading error: " + err);
　　　　　　});

　　　　},
　　　　error =>  {

　　　　　　console.error("錯誤信息為：", error)

　　　　} 
　　);
}

注：圖片轉化為base64引用了：import RNFS from 'react-native-fs';

三、總結：

更多使用方法以及參數可按需去取 : https://www.npmjs.com/package/react-native-view-shot

TIPS：在安卓上可能你會碰到這樣的問題，如圖：

Trying to resolve view with tag 2573 which doesn't exist 或

Trying to resolve view with tag 2105 which doesn't exist

這兩種現象都給我碰到了，解決處理是給需要截取的內容添加背景色

如在模塊上添加：

<View ref="shareImageRef" style={{backgroundColor: 'white'}}>這里為需要展示的內容</View>

以上是“React-Native之截圖組件react-native-view-shot怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！