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-intl实现React国际化多语言的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
React useImperativeHandle处理组件状态和生命周期用法详解
React Hooks 为我们提供了一种全新的方式来处理组件的状态和生命周期,useImperativeHandle是一个相对较少被提及的Hook,但在某些场景下,它是非常有用的,本文将深讨useImperativeHandle的用法,并通过实例来加深理解2023-09-09
这篇文章主要介绍了React 中的列表渲染为什么要加 key,在 React 中我们经常需要渲染列表，比如展示好友列表，文中给大家介绍了列表渲染不提供 key 会如何，通过实例代码给大家介绍的非常详细，需要的朋友一起看看吧2022-07-07
使用react在修改state中的数组和对象数据的时候(setState)
这篇文章主要介绍了使用react在修改state中的数组和对象数据的时候(setState)，具有很好的参考价值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
React 全自动数据表格组件——BodeGrid的实现思路
表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。这篇文章主要介绍了React 全自动数据表格组件——BodeGrid ,需要的朋友可以参考下2019-06-06
本文介绍了如何模仿抖音发布页面,使用div元素作为输入框,并利用CSS样式和JavaScript动态操作DOM,实现类似于input输入框的功能,感兴趣的朋友跟随小编一起看看吧2024-10-10
本文主要介绍了React脚手架搭建的学习，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。2021-05-05
React踩坑之antd输入框rules中的required=true问题
这篇文章主要介绍了React踩坑之antd输入框rules中的required=true问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家介绍了React竞态条件Race Condition实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论