美文网首页React Native学习
React Native圖片緩存組件

React Native圖片緩存組件

作者: purewater2014 | 来源:发表于2018-11-02 21:26 被阅读1次

    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 代碼,所以安裝會比較複雜,強烈建議按照 官方安裝手冊 來安裝。當然,一般情況下使用以下兩個命令來安裝就可以:

    <pre class="prettyprint" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.86em; margin: 1.64em 0px; padding: 7px 7px 7px 10px; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 3px solid rgba(0, 0, 0, 0.08); overflow: auto; line-height: 1.5; color: rgba(0, 0, 0, 0.68); background-color: rgba(0, 0, 0, 0.02);">npm install rn-fetch-blob --save react-native link rn-fetch-blob
    複製代碼</pre>

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

    react-native-rn-cacheimage

    由於這個package本身是純 js 來實現的,沒有涉及 iOSandroid 的本地代碼,所以安裝很簡單:

    <pre style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.86em; margin: 1.64em 0px; padding: 7px 7px 7px 10px; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 3px solid rgba(0, 0, 0, 0.08); overflow: auto; line-height: 1.5; color: rgba(0, 0, 0, 0.68); background-color: rgba(0, 0, 0, 0.02);">$ npm install react-native-cacheimage --save
    複製代碼</pre>

    使用

    Register和unregister

    • 在使用 CacheImageAnimatedCacheImage 之前,需要初始化相關信息,建議在APP嘴頂層的 componentcomponentDidMount() 中初始化
    • 在APP的頂層 componentcomponentWillUnmount() 中,執行清除任務

    具體操作,見如下代碼 :

    <pre class="prettyprint" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.86em; margin: 1.64em 0px; padding: 7px 7px 7px 10px; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 3px solid rgba(0, 0, 0, 0.08); overflow: auto; line-height: 1.5; color: rgba(0, 0, 0, 0.68); background-color: rgba(0, 0, 0, 0.02);">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 (
            <Provider store={store}>
                <App/>
            </Provider>
        )
    }
    

    }

    AppRegistry.registerComponent("YourAppName", () => MyApp);

    複製代碼</pre>

    使用CacheImage和AnimatedCacheImage組件

    CacheImage組件

    CacheImage 組件可以代替原有的 ImageImageBackground 組件使用,並且 propsImageImageBackground 參數保持一致.

    <pre class="prettyprint" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.86em; margin: 1.64em 0px; padding: 7px 7px 7px 10px; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 3px solid rgba(0, 0, 0, 0.08); overflow: auto; line-height: 1.5; color: rgba(0, 0, 0, 0.68); background-color: rgba(0, 0, 0, 0.02);">import {CacheImage} from 'react-native-rn-cacheimage'
    export default class Example extends React.Component {
    ...
    render() {

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

    <Text>Hello World!</Text>
    </CacheImage>
    </View>
    )

    }
    ...
    }
    複製代碼</pre>

    AnimatedCacheImage組件

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

    <pre class="prettyprint" style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.86em; margin: 1.64em 0px; padding: 7px 7px 7px 10px; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 3px solid rgba(0, 0, 0, 0.08); overflow: auto; line-height: 1.5; color: rgba(0, 0, 0, 0.68); background-color: rgba(0, 0, 0, 0.02);">import {AnimatedCacheImage} from 'react-native-rn-cacheimage'

    export default class Example extends React.Component {
    ...
    render() {

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

    }
    ...
    }
    複製代碼</pre>

    CacheHelper的API

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

    getCacheSize():Promise<Number>

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

    getCacheSizeFormat():Promise<String>

    這個與 getCacheSize() 很相似,只不過它的返回結果是已經格式化好的,比如: 10.2MB98KB

    clearCache():Promise<Void>

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

    相关文章

      网友评论

        本文标题:React Native圖片緩存組件

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