ReactNative图片保存到相册(Android 和 ios)

ios 保存:

React Native 的 CameraRoll API 提供了访问本地相册的功能(经过测试该组件只支持 ios)

第一步

如果该库包含原生代码,那么在它的文件夹下一定有一个.xcodeproj文件。 把这个文件拖到你的XCode工程下(通常拖到XCode的Libraries分组里)
image.png

第二步

点击你的主工程文件,选择Build Phases,然后把刚才所添加进去的.xcodeproj下的Products文件夹中的静态库文件(.a文件),拖到Link Binary With Libraries组内。
image.png
第三步:
然后添加库所在的目录(如果它还有像React这样的子目录需要包含,注意要选中recursive选项)
image.png

代码使用:

import {Platform,CameraRoll} from 'react-native';
 var promise = CameraRoll.saveToCameraRoll("图片的 url")
            promise.then(function(result) {
                this.refs.toast.show("图片已保存至相册")
            }).catch(function(error) {
                this.refs.toast.show("保存失败")
            })
Android 保存:
Android 的保存利用 react-native-fs 进行保存图片

具体实现代码:

const RNFS = require('react-native-fs'); //文件处理
const storeLocation = `${RNFS.DocumentDirectoryPath}`;
     let pathName = new Date().getTime() + "文件名.png"
     let downloadDest = `${storeLocation}/${pathName}`;
      const ret = RNFS.downloadFile({fromUrl:saveImageUrl,toFile:downloadDest});
      ret.promise.then(res => {
        if(res && res.statusCode === 200){
            var promise = CameraRoll.saveToCameraRoll("file://" + downloadDest);
            promise.then(function(result) {
               console.log("图片已保存至相册")
            }).catch(function(error) {
               console.log("保存失败")
            })
        }
      })

ok 大功告成
欢迎关注 一起学习交流(QQ交流群:813401757)

### 使用 React Native CameraRoll API 将图片保存到设备相册 为了将图像保存到设备的图库中,可以使用 `@react-native-community/cameraroll` 库中的 `save` 方法。此方法允许应用程序将媒体文件保存到用户的相机胶卷。 以下是具体实现方式: #### 安装依赖包 首先需要安装 `@react-native-community/cameraroll` 其他必要的权限处理模块: ```bash npm install @react-native-community/cameraroll npx pod-install ios # 如果项目中有 iOS 平台的话 ``` #### 请求存储权限 在 Android 上还需要请求读写外部存储权限,在应用启动时调用相应API来获取这些权限[^1]。 对于iOS平台,则不需要显式申请访问照片库的权限,因为当首次尝试保存图片相册时会自动弹窗询问用户授权。 #### 实现代码示例 下面是一个简单的例子展示如何利用该功能保存网络上的图片链接到本地相册: ```javascript import React, { useState } from 'react'; import { View, Button, Alert } from 'react-native'; import * as ImagePicker from 'expo-image-picker'; // 可选:用于选择已有图片 import { saveToCameraRoll } from '@react-native-community/cameraroll'; const SaveImageExample = () => { const handleSaveImage = async (uri) => { try { await saveToCameraRoll(uri); alert('成功保存'); } catch (error) { console.error(error.message || error); alert('保存失败'); } }; return ( <View style={{ flex: 1 }}> {/* 假设这里有一个按钮触发保存操作 */} <Button title="点击保存图片" onPress={() => handleSaveImage('https://example.com/image.jpg')} /> </View> ); }; export default SaveImageExample; ``` 这段代码定义了一个名为 `handleSaveImage` 的异步函数接收一个 URI 参数并将其传递给 `saveToCameraRoll()` 函数以完成实际的保存动作。如果遇到错误则捕获异常并通过警告框通知用户;否则显示成功的提示信息[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值