美文网首页
React-Native 支持ios与android图片保存到本

React-Native 支持ios与android图片保存到本

作者: 思凡小月 | 来源:发表于2018-03-13 17:47 被阅读0次

看了 http://1c7.me/2018-react-native-save-image-file-from-app-to-phone/ 以为要这两个库配合使用 (react-native-fetch-blob 、react-native-fs) 后来发现用react-native-fs 就能实现我的业务需求:保存一张图片到本地 !
因为不知道RNFS提供的存储路径有权限问题,导致会看不到存储的文件 瞎折腾了一天 !!! 这里感谢: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的保存图片做完了 把坑说一下
今天看到 http://www.hangge.com/blog/cache/detail_1615.html 里的reactnative 原生API
CameraRoll API 提供的 static saveToCameraRoll(tag, type?) 方法 将图片保存到相册中
在Xcode 需要链接 RCTCameraRoll 库 网站里有就不多说了
在 Info.plist 配置完(Privacy - Photo Library Usage Description)后 ,保存图片时闪退也没报错 !
解决办法加入 Privacy - Photo Library Additions Usage Description 到 Info.plist

屏幕快照 2018-03-14 17.39.46.png
/*
 * @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; //外部文件,共享目录的绝对路径(仅限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导出中提供以下常量:

MainBundlePath(String)主包目录的绝对路径(Android上不可用)
CachesDirectoryPath(String)高速缓存目录的绝对路径
DocumentDirectoryPath (String)文档目录的绝对路径
TemporaryDirectoryPath(String)临时目录的绝对路径(回到Android上的Caching-Directory)
LibraryDirectoryPath(String)NSLibraryDirectory的绝对路径(仅适用于iOS)
ExternalDirectoryPath(String)外部文件,共享目录的绝对路径(仅限android)
ExternalStorageDirectoryPath(String)外部存储的绝对路径,共享目录(仅限android)

//我的引用方法
_LongPress(uri){
        if(!uri)return null;
        Alert.alert(
            '下載',
            '是否確定下載?',
            [
                {text:'取消',onPress:()=>null},
                {text:'確定',onPress:()=>[_Download(uri)
                                            .then((res)=>{
                                                this.setState({meng:false}) //关闭遮罩
                                            })
                                            .catch((error)=>{
                                                this.setState({meng:false}) //关闭遮罩
                                                console.log('error',error)
                                            }),this.setState({meng:true})]} //打开遮罩
            ]
        );
    }

相关文章

网友评论

      本文标题:React-Native 支持ios与android图片保存到本

      本文链接:https://www.haomeiwen.com/subject/gypzfftx.html