react native图片缓存组件img-catch

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

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

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

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

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

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

5、管理图片
// 获取图片的缓存路径
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();

6、还有更多其他的操作，可以看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’)
RNFetchBlob.DocumentDir不是一个对象

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

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

如果没有

就执行下面命令行：

$ npm install --save [email protected]

如果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时可能提示：
rnpm

参考 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
然后，这个组件就能顺利运行了，
小小的使用下

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

react native图片缓存组件img-catch

猜你喜欢