React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié)
一、現(xiàn)象
1、需求：把某展示頁面進行截取保存到相冊、并可進行以海報的形式分享出去；
2、支持iOS和安卓
二、解決
1、安裝： npm i --save react-native-view-shot
2、進行鏈接處理：react-native link react-native-view-shot
3、當為IOS時執(zhí)行還需要執(zhí)行一下命令（安卓不用）：cd ios && pod install && cd ..
4、使用：
（1）、引用：
import { captureRef } from "react-native-view-shot";
（2）、模板：
<View ref="shareImageRef">這里為需要展示的內(nèi)容</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';
// 把生成的鏈接轉(zhuǎn)化為 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)
}
);
}
注：圖片轉(zhuǎn)化為base64引用了：import RNFS from 'react-native-fs';
三、總結(jié)：
更多使用方法以及參數(shù)可按需去取 : 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
這兩種現(xiàn)象都給我碰到了，解決處理是給需要截取的內(nèi)容添加背景色
如在模塊上添加：
<View ref="shareImageRef" style={{backgroundColor: 'white'}}>這里為需要展示的內(nèi)容</View>
到此這篇關(guān)于React-Native之截圖組件react-native-view-shot的介紹與使用的文章就介紹到這了,更多相關(guān)React Native截圖組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react-intl實現(xiàn)React國際化多語言的方法
這篇文章主要介紹了react-intl實現(xiàn)React國際化多語言的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
React useImperativeHandle處理組件狀態(tài)和生命周期用法詳解
React Hooks 為我們提供了一種全新的方式來處理組件的狀態(tài)和生命周期,useImperativeHandle是一個相對較少被提及的Hook,但在某些場景下,它是非常有用的,本文將深討useImperativeHandle的用法,并通過實例來加深理解2023-09-09
這篇文章主要介紹了React?中的列表渲染為什么要加?key,在?React?中我們經(jīng)常需要渲染列表，比如展示好友列表，文中給大家介紹了列表渲染不提供?key?會如何，通過實例代碼給大家介紹的非常詳細，需要的朋友一起看看吧2022-07-07
使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState)
這篇文章主要介紹了使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState)，具有很好的參考價值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xiàn)思路
表格是在后臺管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下2019-06-06
react如何使用useRef模仿抖音標題里面添加標簽內(nèi)容
本文介紹了如何模仿抖音發(fā)布頁面,使用div元素作為輸入框,并利用CSS樣式和JavaScript動態(tài)操作DOM,實現(xiàn)類似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧2024-10-10
本文主要介紹了React腳手架搭建的學習，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
詳解React Angular Vue三大前端技術(shù)
當前世界中，技術(shù)發(fā)展非常迅速并且變化迅速，開發(fā)者需要更多的開發(fā)工具來解決不同的問題。本文就對于當下主流的前端開發(fā)技術(shù)React、Vue、Angular這三個框架做個相對詳盡的探究，目的是為了解開這些前端技術(shù)的面紗，看看各自的廬山真面目。2021-05-05
React踩坑之a(chǎn)ntd輸入框rules中的required=true問題
這篇文章主要介紹了React踩坑之a(chǎn)ntd輸入框rules中的required=true問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React競態(tài)條件Race Condition實例詳解
這篇文章主要為大家介紹了React競態(tài)條件Race Condition實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11