看了 http://1c7.me/2018-react-native-save-image-file-from-app-to-phone/ 以為要這兩個(gè)庫(kù)配合使用 (react-native-fetch-blob 、react-native-fs) 后來(lái)發(fā)現(xiàn)用react-native-fs 就能實(shí)現(xiàn)我的業(yè)務(wù)需求:保存一張圖片到本地 巍杈!
因?yàn)椴恢繰NFS提供的存儲(chǔ)路徑有權(quán)限問(wèn)題藻治,導(dǎo)致會(huì)看不到存儲(chǔ)的文件 瞎折騰了一天 L阋取!励七! 這里感謝:https://blog.99diary.com/2017/10/20/react-native-fs%E4%B8%AD%E7%9A%84%E8%B7%AF%E5%BE%84/ 提供的幫助砂沛!
2018-03-14
今天把ios的保存圖片做完了 把坑說(shuō)一下
今天看到 http://www.hangge.com/blog/cache/detail_1615.html 里的reactnative 原生API
CameraRoll API 提供的 static saveToCameraRoll(tag, type?) 方法 將圖片保存到相冊(cè)中
在Xcode 需要鏈接 RCTCameraRoll 庫(kù) 網(wǎng)站里有就不多說(shuō)了
在 Info.plist 配置完(Privacy - Photo Library Usage Description)后 ,保存圖片時(shí)閃退也沒(méi)報(bào)錯(cuò) 彤敛!
解決辦法加入 Privacy - Photo Library Additions Usage Description 到 Info.plist
/*
* @Author: shifan
* @Date: 2018-03-13 16:48:49
* @Last Modified by: shifan
* @Last Modified time: 2018-03-14 16:51:17
* @功能: { 下載圖片}
*/
import React from 'react';
import { Platform, CameraRoll } from 'react-native';
import RNFS from 'react-native-fs';
export function _Download(uri) {
if (!uri) return null;
return new Promise((resolve, reject) => {
let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; //外部文件,共享目錄的絕對(duì)路徑(僅限android)
const downloadDest = `${dirs}/${((Math.random() * 10000000) | 0)}.jpg`;
const formUrl = uri;
const options = {
fromUrl: formUrl,
toFile: downloadDest,
background: true,
begin: (res) => {
console.log('begin', res);
console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');
},
};
try {
const ret = RNFS.downloadFile(options);
ret.promise.then(res => {
console.log('success', res);
console.log('file://' + downloadDest)
var promise = CameraRoll.saveToCameraRoll(downloadDest);
promise.then(function(result) {
alert('保存成功了赌!地址如下:\n' + result);
}).catch(function(error) {
console.log('error', error);
alert('保存失斈!\n' + error);
});
resolve(res);
}).catch(err => {
reject(new Error(err))
});
} catch (e) {
reject(new Error(e))
}
})
}
RNFS導(dǎo)出中提供以下常量:
MainBundlePath(String)主包目錄的絕對(duì)路徑(Android上不可用)
CachesDirectoryPath(String)高速緩存目錄的絕對(duì)路徑
DocumentDirectoryPath (String)文檔目錄的絕對(duì)路徑
TemporaryDirectoryPath(String)臨時(shí)目錄的絕對(duì)路徑(回到Android上的Caching-Directory)
LibraryDirectoryPath(String)NSLibraryDirectory的絕對(duì)路徑(僅適用于iOS)
ExternalDirectoryPath(String)外部文件勿她,共享目錄的絕對(duì)路徑(僅限android)
ExternalStorageDirectoryPath(String)外部存儲(chǔ)的絕對(duì)路徑袄秩,共享目錄(僅限android)
//我的引用方法
_LongPress(uri){
if(!uri)return null;
Alert.alert(
'下載',
'是否確定下載?',
[
{text:'取消',onPress:()=>null},
{text:'確定',onPress:()=>[_Download(uri)
.then((res)=>{
this.setState({meng:false}) //關(guān)閉遮罩
})
.catch((error)=>{
this.setState({meng:false}) //關(guān)閉遮罩
console.log('error',error)
}),this.setState({meng:true})]} //打開(kāi)遮罩
]
);
}