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是一个持久路径。根据需要使用对应的路径地址

相关推荐
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding8 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜8 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui