react native圖片緩存組件img-catch

官網：https://github.com/wcandillon/react-native-img-cache
一、使用react-native-img-cache這個的前提須要react-native-fetch-blobhtml

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

其餘的方式參考react-native-fetch-blob主頁
二、導入react-native-img-cache --save
npm install react-native-img-cache --savereact

三、使用
import {CachedImage, ImageCache} from 「react-native-img-cache」;android

CachedImage:用來顯示圖片
ImageCache:用來管理的，好比獲取圖片的路徑、清理緩存神馬的git

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

五、管理圖片
// 獲取圖片的緩存路徑
Let a =「http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg」;
let sss = ImageCache.get().getPath(a);
console.log(sss);web

// 清理緩存
ImageCache.get().clear();npm

六、還有更多其餘的操做，能夠看react-native-img-cache主頁(https://github.com/wcandillon/react-native-img-cache)json

在本地下載react-native-fetch-blob，react-native-img-cache遇到的問題：react-native

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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。