上一篇 介绍了ios 的图片预览 和图片保存 ,Android 实现起来就稍微复杂点,
android 的 CameraRoll 只支持 本地文件,解决方式就是把图片下载到本地 ,然后调用这个保存到相册的方法。
这里用到的是 react-native-fs
关于这个 react-native-fs 的使用 git上介绍的已经很详细了,大家可以去看下如何使用的。
下面介绍下:android保存图片到本地相册
1.在android 工程下的
添加 读取外部存储的权限:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
- 下载图片并保存
这里展现部分代码:
import RNFS from 'react-native-fs';
import ImageViewer from 'react-native-image-zoom-viewer';
this.androidDownPath = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`;
savePhoto() {
let index = this.props.curentImage;
let url = this.props.imaeDataUrl[index];
if (Platform.OS === 'ios') { //ios图片保存
let promise = CameraRoll.saveToCameraRoll(url);
promise.then(function (result) {
alert("已保存到系统相册")
}).catch(function (error) {
alert('保存失败!\n' + error);
});
} else { //Android 先下载到本地
let DownloadFileOptions = {
fromUrl: url, //下载路径
toFile: this.androidDownPath // Local filesystem path to save the file to
}
let result = RNFS.downloadFile(DownloadFileOptions);
let _this = this;
result.promise.then(function (val) {
console.log("文件保存成功:" + _this.androidDownPath)
let promise = CameraRoll.saveToCameraRoll(_this.androidDownPath);
promise.then(function (result) {
// console.error(JSON.stringify(result))
alert("已保存到系统相册")
}).catch(function (error) {
alert('保存失败!\n' + error);
});
}, function (val) {
console.log('Error Result:' + JSON.stringify(val));
}
).catch(function (error) {
console.log(error.message);
});
}
}
看下效果图:
实现起来并不是很难, ios 的请参考 react native 实现图片预览