阅读 433

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 代码,所以安装会比较复杂,强烈建议按照 官方安装手册 来安装。当然,一般情况下使用以下两个命令来安装就可以:

$ npm install rn-fetch-blob --save
$ react-native link rn-fetch-blob
复制代码

如果有问题,建议按照官方安装手册 的手动link的方式来安装。

react-native-rn-cacheimage

由于这个package本身是纯 js 来实现的,没有涉及iOSandroid 的本地代码,所以安装很简单:

$ npm install react-native-cacheimage --save
复制代码

使用

Register和unregister

  • 在使用 CacheImageAnimatedCacheImage 之前,需要初始化相关信息,建议在APP嘴顶层的 componentcomponentDidMount() 中初始化
  • 在APP的顶层 componentcomponentWillUnmount()中,执行清除任务

具体操作,见如下代码 :

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);

复制代码

使用CacheImage和AnimatedCacheImage组件

CacheImage组件

CacheImage 组件可以代替原有的 ImageImageBackground 组件使用,并且 propsImageImageBackground 参数保持一致.

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>
		)
		
	}
...
}
复制代码

AnimatedCacheImage组件

AnimatedCacheImage 可以 代替 Animated.Image组件,并且所有参数与 Animated.Image 保持一致

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>
		)
		
	}
...
}
复制代码

CacheHelper的API

CacheHelper 是一个辅助类,里面包含一些工具方法,大家可以根据自己的需求,选择调用。这里就不全部列出来,大家可以直接到 Github查看

getCacheSize():Promise<Number>

获取所有的缓存图片所占用内存大小,返回的数字结果单位是byte

getCacheSizeFormat():Promise<String>

这个与 getCacheSize() 很相似,只不过它的返回结果是已经格式化好的,比如:10.2MB98KB

clearCache():Promise<Void>

清空缓存。一般我们APP都会有一个清空缓存的功能,我们可以调用这个方法清空我们使用这个 package 所产生的缓存文件。

最后

这个图片缓存组件 react-native-rn-cacheimage 就介绍到这里,如果大家想要详细了解,可以直接去 Github 上查看具体说明及源码,如果发现bug可以可以直接提 issue ,或者直接在文章下面提问。

推荐阅读

关注下面的标签,发现更多相似文章
评论