React Native图片缓存组件

栏目: 服务器 · 发布时间: 6年前

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

$ 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 所产生的缓存文件。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learn Python the Hard Way

Learn Python the Hard Way

Zed Shaw / Example Product Manufacturer / 2011

This is a very beginner book for people who want to learn to code. If you can already code then the book will probably drive you insane. It's intended for people who have no coding chops to build up t......一起来看看 《Learn Python the Hard Way》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试