React Native圖片緩存組件

React Native圖片緩存組件

今天介紹一個React Native的圖片緩存組件 react-native-rn-cacheimage ，純JS實現，所以兼容性很好。

大家都知道，其實React Native 的 Image 組件在 iOS 端實現了緩存，而 android 端仍未實現，而且，就算實現了 iOS 端 ，可能有些需求仍然比較難實現，比如一般APP都有一個 清除緩存 的功能，如果我們使用默認的 Image 的緩存實現，我們能難定位圖片到底緩存在本地文檔系統的哪個目錄。 react-native-rn-cacheimage 的實現方式是，把所有的緩存圖片都放在一個指定的文檔夾下，並提供了一個方法 CacheHelper.clearCache() 方法能夠輕鬆清除緩存。

下面我們就來介紹下它的安裝及使用

安裝

rn-fetch-blob

react-native-rn-cacheimage 使用到了 rn-fetch-blob 這個package，由於 rn-fetch-blob 的實現涉及到了 native 代碼，所以安裝會比較複雜，強烈建議按照 官方安裝手冊 來安裝。當然，一般情況下使用以下兩個命令來安裝就可以：

 react-native link rn-fetch-blob
 複製代碼

如果有問題，建議按照 官方安裝手冊 的手動 link 的方式來安裝。

react-native-rn-cacheimage

由於這個package本身是純 js 來實現的，沒有涉及 iOS 和 android 的本地代碼，所以安裝很簡單：

$ npm install react-native-cacheimage --save
 複製代碼

使用

Register和unregister

• 在使用 CacheImage 和 AnimatedCacheImage 之前，需要初始化相關信息，建議在APP嘴頂層的 component 的 componentDidMount() 中初始化
• 在APP的頂層 component 的 componentWillUnmount() 中，執行清除任務

具體操作，見如下代碼 ：

import React from 'react'
 import {AppRegistry} from 'react-native'
 import {Provider} from 'react-redux'
 import ReduxStore from './src/configuration/reduxStore'
 import App from './src/App'
 import {CacheHelper} from "react-native-rn-cacheimage";

const store = ReduxStore
class MyApp extends React.Component {
 componentDidMount() {
 CacheHelper.register({overwrite:false}).catch(e => console.log(e))
 }
componentWillUnmount() {
    CacheHelper.unregister().catch(e=>console.log(e))
}

render() {
    return (
        
            
        
    )
}

}
AppRegistry.registerComponent("YourAppName", () => MyApp);
複製代碼

使用CacheImage和AnimatedCacheImage組件

CacheImage組件

CacheImage 組件可以代替原有的 Image 及 ImageBackground 組件使用，並且 props 與Image 及 ImageBackground 參數保持一致.

import {CacheImage} from 'react-native-rn-cacheimage'
 export default class Example extends React.Component {
 ...
 render() {

return
 (
 
  source={{uri:'https://xxx.xxx'}}
 defaultSource={require('/xxx/xxx.png')}
 style={styles.image}
 />
  source={{uri:'https://xxx.xxx'}}
 defaultSource={require('/xxx/xxx.png')}
 style={styles.image}


Hello World!
 
 
 )
}
 ...
 }
 複製代碼

AnimatedCacheImage組件

AnimatedCacheImage 可以 代替 Animated.Image 組件，並且所有參數與 Animated.Image 保持一致

import {AnimatedCacheImage} from 'react-native-rn-cacheimage'

export default class Example extends React.Component {
 ...
 render() {
return
 (
 
  source={{uri:'https://xxx.xxx.png'}}
 defaultSource={require('/xxx/xxx.png')}
 style={styles.image}
 />
 
 )
}
 ...
 }
 複製代碼

CacheHelper的API

CacheHelper 是一個輔助類，裏面包含一些工具方法，大家可以根據自己的需求，選擇調用。這裏就不全部列出來，大家可以直接到 Github 上 查看

getCacheSize():Promise

獲取所有的緩存圖片所佔用內存大小，返回的數字結果單位是 byte

getCacheSizeFormat():Promise

這個與 getCacheSize() 很相似，只不過它的返回結果是已經格式化好的，比如： 10.2MB， 98KB

clearCache():Promise

清空緩存。一般我們APP都會有一個清空緩存的功能，我們可以調用這個方法清空我們使用這個package 所產生的緩存文檔。