Getting started
rn-fecth-blob
rn-fetch-blob is a dependency for this package that you'll need to add to your project. To install, run the following commands:
$ npm install rn-fetch-blob --save
$ react-native link rn-fetch-blob
And I recommend you install rn-fetch-blob
base on official guide
installation
$ npm install react-native-rn-cacheimage --save
Usage
Register and unregister
- Before mount the
<CacheImage/>
or<AnimatedCacheImage/>
component, should initialize and config some base params. Recommend initialize in thecomponentDidMount()
inside of the topreact componet
in your App. - When all components of your App will been unmounted, you should unregister this package. Recommend do this in the
componentWillMount()
inside of the topreact componet
in your App.
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 Component { CacheHelper } { CacheHelper } { return <Provider => <App/> </Provider> } AppRegistry;
<Image/>
with <CacheImage/>
Replace We can use <CacheImage/>
just like <Image/>
component, and everything is all the same besides this
import CacheImage from 'react-native-rn-cacheimage'Component ... { return ... <CacheImage = = = /> ... }...
<ImageBackground/>
with <CacheImage/>
Replace We can use <ImageBackground/>
just like <CacheImage/>
component, and everything is all the same besides this
import CacheImage from 'react-native-rn-cacheimage' Component ... { return ... <CacheImage = = = > <Text>Hello World!</Text> </CacheImage> ... }...
<Animated.Image/>
component with <AnimatedCacheImage/>
Replace We can use <AnimatedCacheImage/>
just like <Animated.Image/>
component, and everything is all the same besides this
import AnimatedCacheImage from 'react-native-rn-cacheimage' Component ... { return ... <AnimatedCacheImage = = = /> ... }...
API
Components
About below two components, can see the detail in Usage
CacheImage
AnimatedCacheImage
CacheHelper
register(config:Object):Promise<Void>
Init necessary things of current package(react-native-rn-cacheimage
). Should call this method before mount <CacheImage/>
or <AnimatedCacheImage/>
. Recommend call this method in the TOP component of your App.
name | desc | defaultValue |
---|---|---|
config.overwrite |
Overwirte or not when the pre-cached(be downloaded just now) file has exists in the local path. | false |
config.dirsQuantity |
Quantity of all dirs where cached file be saved in. Recommend set a prime number | 17 |
getImagePath(uri:String):Promise<ImagePath:Object>
Get the image cached local path.
name | desc | defaultValue |
---|---|---|
uri |
Image uri. example: https://xxx.xxx/xxx.jpg | |
ImagePath.uri |
Image cached local path. | |
ImagePath.task |
It's the task that fetch the remote image, and you can call task.cancel() to cancel the fetch task manually |
getCacheSize():Promise<Number>
Get the size of used space of all cached images. The unit of result number is Byte
getCacheSizeFormat():Promise<String>
Similarity to getCacheSize()
, and difference is that the result is been formatted.
The format rule is as below:
0KB
<=result
<1024KB
, format toKB
, eg:134KB
result
>=1024KB
, format toMB
, eg:109.3MB
clearCache():Promise<Void>
Clear all cached images.
unregister():Promise<Void>
Un-register current package, cancel all uncompleted tasks which fetch image.