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的介绍与使用的文章就介绍到这了,更多相关React Native截图组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React-router v6在Class组件和非组件代码中的正确使用
这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03React Native系列之Recyclerlistview使用详解
这篇文章主要为大家介绍了React Native系列之Recyclerlistview使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10在react-router4中进行代码拆分的方法(基于webpack)
这篇文章主要介绍了在react-router4中进行代码拆分的方法(基于webpack),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03React Native使用百度Echarts显示图表的示例代码
本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论