React-Native之截图组件react-native-view-shot的介绍与使用小结

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

　<View ref="shareImageRef">这里为需要展示的内容</View>

// 获得截取后的图片链接

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)

　　　　} 
　　);
}

// 把生成的链接转化为 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)

　　　　} 
　　);
}

<View ref="shareImageRef" style={{backgroundColor: 'white'}}>这里为需要展示的内容</View>