react native图片缓存组件img-catch

官网：https://github.com/wcandillon/react-native-img-cache
一、使用react-native-img-cache这个的前提须要react-native-fetch-blob

npm install --save react-native-fetch-blob
react-native link

其余的方式参考react-native-fetch-blob主页
二、导入react-native-img-cache --save
npm install react-native-img-cache --save

三、使用
import {CachedImage, ImageCache} from “react-native-img-cache”;

CachedImage:用来显示图片
ImageCache:用来管理的，好比获取图片的路径、清理缓存神马的

四、加载图片
<CachedImage
style={ {width:100, height: 100}}
source={ { uri: “http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg” }} />

五、管理图片
// 获取图片的缓存路径
Let a =“http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg”;
let sss = ImageCache.get().getPath(a);
console.log(sss);

// 清理缓存
ImageCache.get().clear();

六、还有更多其余的操做，能够看react-native-img-cache主页(https://github.com/wcandillon/react-native-img-cache)

在本地下载react-native-fetch-blob，react-native-img-cache遇到的问题：

Module does not exiist in the module map or in these derectories 检查路径

unable to resolve module ‘expo’ from
watchman: command not found 检查路径、、

could not find method compile() for arguments [project ':react-native-fetch-blob
有的须要下载AndroidSDK的包，缺包的要下载所须要的及提示的SDK包

undefined is not an object (evaluating ‘RNFetchBlob.DocumentDir’)

这个报错位置在react-native-fetch-blob下fs.js：

方法以下：
首先看一下最外层package.json下是否有“react-native-fetch-blob”该依赖包

若是没有

就执行下面命令行：

$ npm install --save react-native-fetch-blob@0.10.5

若是react-native-fetch-blob版本较低，移除原有包
$ rnpm uninstall react-native-fetch-blob
从新按上面安装
react-native版本< 0.29
$ rnpm link
react-native版本 0.29.2+
$ react-native link
执行$ rnpm link或rnpm uninstall时可能提示：

参考 https://github.com/rnpm/rnpm 执行命令行：

$ npm install rnpm -g

再执行$ rnpm link或rnpm uninstall
若是出现如下提示：

可参考react-native-fetch-blob\README.md文件：

react-native版本< 0.29

$ RNFB_ANDROID_PERMISSIONS=true rnpm link

react-native版本 0.29.2+
$ RNFB_ANDROID_PERMISSIONS=true react-native link
自动添加权限（亲测RNFB_ANDROID_PERMISSIONS不是内部或外部命令，未解决）。或者用如下手动添加：

在settings.gradle中添加

rootProject.name = 'catchDemo'   //这是个人文件名字
include ':app'
include ':react-native-fetch-blob'
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')

若是node_modules在工做空间根目录，…/省略

在app/build.gradle

dependencies {
  +  compile project(':react-native-fetch-blob')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

在MainApplication或Activity添加包

+ import com.RNFetchBlob.RNFetchBlobPackage;

高版本下

1 @Override
2     protected List<ReactPackage> getPackages() {
3       return Arrays.<ReactPackage>asList(
4          new RNFetchBlobPackage(),                                                                                                                             
5    +      new MainReactPackage()
6       );
7     }

低版本下

1 mReactRootView = new ReactRootView(this);
2 mReactInstanceManager = ReactInstanceManager.builder()
3 .addPackage(new RNFetchBlobPackage())
4 .build();
5 mReactRootView.startReactApplication(mReactInstanceManager, "Task", null);
6 setContentView(mReactRootView);

参考连接：
https://stackoverflow.com/questions/47946494/cannot-read-property-documentdir-of-undefined-react-native-firebase-react-nati
https://stackoverflow.com/questions/43835848/react-native-fetch-blob-undefined-is-not-an-object-evaluating-rnfetchblob-do
http://www.bubuko.com/infodetail-2082024.html

修改完成----->>>react-native run-android
而后，这个组件就能顺利运行了，

出来了，还得继续学习！开森！接下来看存储和一系列操做了。

本文同步分享在 博客“zoepriselife316”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。