在本地下載好，而且改完了文件，正常運行的狀況下，使用react-native-img-cache組件寫了個小的demo，成品如圖：react
想要使用react-native-swiper組件，**記得先下載 **：
官網地址：https://github.com/leecade/react-native-swiperandroid
使用react-native-swiper組件的基本命令 安裝：npm i react-native-swiper --save 查看：npm view react-native-swiper 刪除：npm rm react-native-swiper --save
在使用前，記得要先引入：git
import Swiper from 'react-native-swiper';
下面就能夠看這個img-cache了：github
CachedImage
用於顯示圖片：web
import {CachedImage} from "react-native-img-cache";
<CachedImage source={
{ uri: "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" }} mutable/>
該mutable屬性暗示假設圖像URI能夠隨時間改變。此緩存的生命週期是正在運行的應用程序之一，能夠使用它手動終止ImageCachenpm
ImageCache
clear()：刪除緩存條目和全部物理文件。react-native
ImageCache.get().clear();
bust(uri)：ImageCache可用於從本地緩存中清除圖像。這將刪除緩存條目，但不會刪除任何物理文件。緩存
ImageCache.get().bust("http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg");
cancel(uri)：它還可用於取消圖像下載。滾動圖像時，這很是有用。svg
ImageCache.get().cancel("https://pic.xiami.net/images/common/uploadpic/0/1543997341000.jpg?x-oss-process=image/quality,q_80/crop,y_30,h_360")
on（uri，observer，immutable）：該ImageCache班可觀察員緩存中註冊。flex
const immutable = true;
const observer = (path: string) => {
console.log(`path of the image in the cache: ${path}`);
};
ImageCache.get().on(uri, observer, immutable);
dispose(uri, observer)：觀察員能夠使用dispose如下方式註銷：
ImageCache.get().dispose(uri, observer);
demo中的獲取數據和清空，都是能夠實現的,
代碼以下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,Platform,
Dimensions,
} from 'react-native';
import {CachedImage, ImageCache,CustomCachedImage,} from "react-native-img-cache";
//CachedImage:用來顯示圖片 ImageCache:用來管理的，好比獲取圖片的路徑、清理緩存神馬的
const carouselMokeData =[
{
"title": "陽光明媚，青春正好",
"previewUrl": "http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=2bf80c7b0633874488c8273f3966b38c/eaf81a4c510fd9f90af607422f2dd42a2834a43c.jpg"
},
{
"title": "自信，是無盡智慧的凝聚.",
"previewUrl": "http://pic1.16pic.com/00/11/69/16pic_1169706_b.jpg"
},
{
"title": "平淡，是成功路上的驛站.",
"previewUrl": "http://pic9.photophoto.cn/20081229/0034034885643767_b.jpg"
},
]
export default class catchDemo extends Component {
constructor(props) {
super(props);
// this._goBack = this._goBack.bind(this);
}
componentWillMount() {
// console.warn(JSON.stringify(ImageCache.get()))
// ImageCache.get().cancel("https://pic.xiami.net/images/common/uploadpic/0/1543997341000.jpg?x-oss-process=image/quality,q_80/crop,y_30,h_360")
// console.warn('取消下載第一張圖')
}
//首頁輪播圖
renderSwiperView() {
let images = carouselMokeData.map((value, i) => {
return (
<View key={i} style={
{backgroundColor:'#ededed',}}>
<CachedImage source={
{uri:value.previewUrl}} resizeMode='stretch' style={
{height:300,width: Dimensions.get('window').width}}/>
<Text numberOfLines={1} style={
{backgroundColor:'rgba(51,51,51,0.7)',position:'relative',bottom:Platform.OS == 'android'?55:51,width: Dimensions.get('window').width,fontFamily:'.PingFangSC-Medium',fontSize: 15, color: '#fff',paddingBottom:10,paddingTop:10,paddingLeft:15}}>{value.title}</Text>
</View>
);
});
return (
<Swiper removeClippedSubviews={false} height={300} horizontal={true} autoplay={true} autoplayTimeout={2} dotColor={'rgba(255,255,255,0.26)'} activeDotColor={'#fff'} paginationStyle={
{bottom:38, left: null, right: 10}}>
{images}
</Swiper>
);
}
render() {
return (
<View style={styles.container}>
<View style={
{backgroundColor:'pink',height:300}}>
<View style={
{height:'100%',width:'100%',}}>
{this.renderSwiperView()}
</View>
</View>
<View style={styles.imageStyle}>
<CachedImage style={styles.imgsStyle}
source={
{ uri: "https://pic.xiami.net/images/common/uploadpic/0/1543997341000.jpg?x-oss-process=image/quality,q_80/crop,y_30,h_360" }}
/> {/*其實mutable的屬性是表明圖片的地址會隨着時間的改變發生變化，地址不固定。那麼該緩存的生命週期應用的運行時期而且該能夠經過ImageCache模塊進行手動管理,在這沒有我沒有在CachedImage添加這個屬性*/}
<TouchableOpacity onPress={()=>{console.log(JSON.stringify(ImageCache.get()))}} >
<CachedImage
style={styles.imgsStyle}
source={
{ uri: "http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg" }}
/>
</TouchableOpacity>
</View>
<View style={
{backgroundColor:'pink',flexDirection:'row',justifyContent:'space-between',width:400}}>
<TouchableOpacity onPress={()=>{console.warn(JSON.stringify(ImageCache.get()))}} >
<Text>獲取數據</Text>
</TouchableOpacity>
{/*<TouchableOpacity onPress={()=>{ImageCache.get().clear();console.warn(JSON.stringify(ImageCache.get())) }} >*/}
<TouchableOpacity onPress={()=>{ImageCache.get().bust("http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg");console.warn(JSON.stringify(ImageCache.get()))}} >
<Text>清空</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
imageStyle: {
// flexDirection:'row',
marginBottom: 5,
},
imgsStyle:{
width:'100%',
height: 200,
backgroundColor:'#ededed',
marginTop:20,
}
});
AppRegistry.registerComponent('catchDemo', () => catchDemo);
以上就是寫的小demo了，但願能夠幫助須要的人（包括偶本身），繼續加油！
本文同步分享在 博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。