目錄

• 一、現象
• 二、解決
• 三、總結：

一、現象

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 =>www.cppcns.com  {

　　　　　　console.error("錯誤資訊為：",error)

　　　　} 
　　);
}

// 進化方法，獲得擷取後的圖片連結進行儲存處理到相簿處理

doDownLoadImage = () => {
　　captureRef(this.refs.shareImageRef,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,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("錯誤資訊為：www.cppcns.com
 
",error)

　　　　} 
　　);
}

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

三、總結：

更多使用方法以及引數可按需去取 : https://www.npm.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的介紹與使用的文章就介紹到這了,更多相關React Native截圖元件Mgndh內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！