react native 截图并保存到相册

首先需要三个包

  1. react-native-view-shot (截图,将图片保存到临时路径)
  2. react-native-fs (更改图片路径,从临时路径移出来)
  3. react-native-camera-roll/camera-roll (将图片保存到相册)

直接上代码

javascript 复制代码
import ViewShot from "react-native-view-shot";
 
<ViewShot
    ref={viewShotRef}
    options={{ format: "jpg", quality: 0.9 }}
  >
    <View />
</ViewShot>

这个是页面上,你要保存的截图使用ViewShot组件包括起来。

然后使用capture方法 获取截图的临时地址。

因为ios是不支持直接将临时图片保存到相册里的。

这里你还需要使用RNFS.moveFile将临时图片移动到一个持久目录下,然后再调用保存相册方法。

javascript 复制代码
 const captureAndSaveScreenshot = async (viewShotRef: any) => {
        try {
            const uri = await viewShotRef.current.capture({
                format: 'jpg',
                quality: 0.9,
                result: 'tmpfile',
                snapshotContentContainer: true
            });
            const fileName = `screenshot_${Date.now()}.jpg`;
            const destPath = `${RNFS.DocumentDirectoryPath}/${fileName}`;
            console.log(destPath, 'destPath');
            await RNFS.moveFile(uri, destPath);
            const savedAsset = await CameraRoll.saveAsset(destPath);
            const photoUri = savedAsset.node.image.uri;
            return photoUri || destPath;
        } catch (error) {
            console.error('截图失败', error);
            throw error;
        }
    };

此处的photoUri是本地路径 ph:/ 开头的,destPath是一个持久路径。根据需要使用对应的路径地址

相关推荐
十八朵郁金香4 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
拉不动的猪14 分钟前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
小p44 分钟前
react学习2:react中常用的hooks
前端·react.js
南清的coding日记44 分钟前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
yoyoma1 小时前
object 、 map 、weakmap区别
前端·javascript
shyshi1 小时前
vercel 部署 node 服务和解决 vercel 不可访问的问题
前端·javascript
.生产的驴1 小时前
React 模块化Axios封装请求 统一响应格式 请求统一处理
前端·javascript·react.js·前端框架·json·ecmascript·html5
雾岛听风来1 小时前
Android开发中常用高效数据结构
前端·javascript·后端
思考着亮2 小时前
formData
javascript
yoyoma3 小时前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript