第一次请求网络数据时，把数据保存在本地并记录当前时间，下次请求时，如果有本地数据就先显示本地数据，并且判断如果保存该数据的时间与当前时间超过或等于一分钟，再去请求网络更新数据，并保存在本地。

在先前的ListView的基础上改了改：

import ListViewItemDemo from './ListViewItemDemo';
import Toast,{DURATION} from 'react-native-easy-toast';
const URL="http://101.201.78.24/api/activity/list";

export default class @H_404_25@ListViewDemo extends @H_404_25@Component {

    constructor(props){
        super(props);
        this.state={
            count:0,result:'',refreshing:true,dataSource:new ListView.DataSource({
                rowHasChanged:(r1,r2)=>r1!=r2,}),isFirstIn:true,dataArray:[],coffee:'',};
    }

    //请求网络数据
    getNetData(url){
        var promise=new Promise((resolve,reject)=>{ fetch(url).then(response=> response.json()). then(result=>{ this.refs.toast.show("请求网络数据",DURATION.LENGTH_SHORT); //在请求网络数据时，把数据保存在本地 if(!result){ reject(new Error('请求网络数据发生错误')); return; } resolve(result); this.saveLocalData(url,result); }). catch(error=>reject(error)); }); @H_404_25@return @H_404_25@promise; } //实现缓存功能 @H_404_25@fetchData(url){ @H_404_25@var @H_404_25@promise=@H_404_25@new @H_404_25@Promise((resolve,reject)=>{ //获取本地数据 this.getLocalData(url).then(result=>{ //如果有本地数据，返回给调用者 if(result){ this.refs.toast.show("显示的是本地数据",DURATION.LENGTH_SHORT); resolve(result); }else{ this.refs.toast.show("第一次请求网络数据",DURATION.LENGTH_SHORT); //没有本地数据，那么去请求网络数据 this.getNetData(url).then(result=>{ resolve(result) }).catch(error=>{ reject(error) }) } }) //获取本地数据发生异常,则也去请求网络数据 .catch(error=>{ this.getNetData(url).then(result=>{ resolve(result) }).catch(error=>{ reject(error) }) }) }); @H_404_25@return @H_404_25@promise; } //获取本地数据 @H_404_25@getLocalData(url){ @H_404_25@var @H_404_25@promise=@H_404_25@new @H_404_25@Promise((resolve,reject)=>{ AsyncStorage.getItem(url,(error,result)=>{ if(error){ reject(error); }else{ //从本地数据库获取的是字符串，转化为构建该字符串的对象 try{ resolve(JSON.parse(result)); }catch (e){ reject(e); } } }) }); @H_404_25@return @H_404_25@promise; } @H_404_25@saveLocalData(url,result){ @H_404_25@if(!url||!result)@H_404_25@return; @H_404_25@let @H_404_25@wrapData={ @H_404_25@resultData:@H_404_25@result,@H_404_25@update:@H_404_25@new @H_404_25@Date().@H_404_25@getTime(),}; //保存在本地数据库的是字符串，保存字符串对象会出现错误 @H_404_25@AsyncStorage.@H_404_25@setItem(url,JSON.stringify(wrapData),error=>{ }) } //判断数据 @H_404_25@isUpdate(saveTime){ @H_404_25@let @H_404_25@currentDate=@H_404_25@new @H_404_25@Date(); @H_404_25@let @H_404_25@saveDate=@H_404_25@new @H_404_25@Date() @H_404_25@saveDate.@H_404_25@setTime(saveTime); //超过或等于一分钟再去请求网络数据 @H_404_25@if(currentDate.getMinutes()-saveDate.getMinutes()>=1){ @H_404_25@return @H_404_25@true; }@H_404_25@else{ @H_404_25@return @H_404_25@false; } } @H_404_25@componentDidMount(){ @H_404_25@this.@H_404_25@onLoad(); } @H_404_25@onRefresh(){ @H_404_25@this.@H_404_25@onLoad(); } @H_404_25@onLoad(){ @H_404_25@this.@H_404_25@setState({ refreshing:true,}); @H_404_25@this.@H_404_25@fetchData(URL).@H_404_25@then(result=> { let realResult=result&&result.resultData?result.resultData:result; this.setState({ dataSource: this.state.dataSource.cloneWithRows(realResult.data.results),refreshing:false,}); //如果本地的数据保存的时间和当前时间差值达到一定限度，则需要访问网络 if(result&&result.update&&this.isUpdate(result.update)){ return this.getNetData(URL); } }) .@H_404_25@then(result=>{ this.setState({ dataSource: this.state.dataSource.cloneWithRows(result.data.results),}); }) .@H_404_25@catch(error=>{ console.log(error) }); } @H_404_25@renderRow(item){ @H_404_25@return <@H_404_25@ListViewItemDemo @H_404_25@item={@H_404_25@item}/> } @H_404_25@renderLine(){ @H_404_25@return <@H_404_25@View @H_404_25@style={@H_404_25@styles.@H_404_25@line}></@H_404_25@View> } @H_404_25@render(){ @H_404_25@return( <View style={styles.containers}> <ListView dataSource={this.state.dataSource} renderRow={(item)=>this.renderRow(item)} renderSeparator={()=>this.renderLine()} refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={()=>this.onRefresh()} /> } /> {/*Toast在根视图的底部去使用,在视图被渲染时，把toast声明*/} <Toast ref="toast"/> </View> ) } } @H_404_25@const @H_404_25@styles=@H_404_25@StyleSheet.@H_404_25@create({ containers: { flex:1,},line:{ backgroundColor:'red',height:0.5,} });

在保存数据的时候，注意把当前的时间也保存下来。