RN FlatList使用Demo

import React from 'react'; import { FlatList, Image, Text, TouchableWithoutFeedback, View } from 'react-native'; const appendZero = (n) => n.toLocaleString({}, {minimumIntegerDigits: 2}); let curItem; let hasMoreData = true; const tag = "FlatListDemo"; export default class FlatListDemo extends React.Component{ constructor(props) { super(props); /*let data = [ {time:"10:00:01",eventTxt:"有人在门前逗留"}, {time:"10:00:02",eventTxt:"有人按门铃"}, {time:"10:00:03",eventTxt:"异常事件"}, ]*/ let data = [] for (let i = 0; i < 50; i++) { data.push({time:"10:00:"+appendZero(i, 10),eventTxt:"有人在门前逗留"}); } this.state = { isRefreshing: false, showFoot: 0, data: data } } render() { return ( <FlatList data={this.state.data} renderItem={this._renderItem} keyExtractor={(item, index) => `key_${index}`} ListFooterComponent={this._renderFooter.bind(this)} onRefresh={this._onRefresh.bind(this)} refreshing={this.state.isRefreshing} onEndReached={this._onEndReached.bind(this)} onEndReachedThreshold={0.1} scrollIndicatorInsets={{right: 1}} /> ) } _renderItem = ({item, index}) => { let timeTxt = item.time; let eventTxt = item.eventTxt; let imgSource = require("../../resources/Images/item_icon.png") ; let dotImg = require("../../resources/Images/icon_dot1.png"); let dotSize = 14; return ( <TouchableWithoutFeedback onPress={this._itemPress.bind(this, item)} /*onLongPress={this._itemLongPress.bind(this, item)}*/> <View style={{flexDirection: 'column', marginLeft: 0, marginRight: 20, height: 100}}> <View style={{flexDirection: 'row', height: '100%'}}> <View style={{ flexDirection: 'column', width: 40, height: '100%', alignItems: 'center', justifyContent: 'center' }}> <View style={{width:1,flex:1,backgroundColor:'rgba(0, 0, 0, 0.1)'}}/> <Image source={dotImg} style={{ height: dotSize, width: dotSize }}/> <View style={{width:1,flex:1,backgroundColor:this.state.data.length -1 === index ?"00ffffff" :'rgba(0, 0, 0, 0.1)'}}/> </View> <View style={{ flexDirection: 'column', width: '56%', height: '100%', alignItems: 'center', justifyContent: 'center', }}> <Text style={{ width: '100%', fontSize: 15, color: "#000000", textAlign: 'left' }}>{timeTxt}</Text> <Text style={{ width: '100%', fontSize: 14, color: "#000000", textAlign: 'left', marginTop: 5 }}>{eventTxt}</Text> </View> <View style={{flex: 1}}/> <View style={{ flexDirection: 'column', height: '100%', alignItems: 'center', justifyContent: 'center' }}> <Image style={{borderRadius: 5, height: 75, width: 120}} source={imgSource}/> { (curItem!==undefined && (curItem.time === item.time)) ? <View style={{ position: "absolute", width: "100%", height: '100%', alignItems: 'center', justifyContent: 'center', }}> <Image style={{height: 30, width: 30}} source={require("../../resources/Images/icon_alarm_play.png")}/> </View>: null } </View> </View> </View> </TouchableWithoutFeedback> ); } _itemPress = (item) => { console.log(tag, item); curItem = item; this.setState({}); } _itemLongPress = (item) => { } _renderFooter() { if (this.state.showFoot === 1) { if(this.state.data.length > 3){ return ( <View style={{height: 30, alignItems: 'center', justifyContent: 'flex-start'}}> <Text style={{color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5}}> 没有可加载的数据 </Text> </View> ) }else{ return ( <View> <Text></Text> </View> ) } } else if (this.state.showFoot === 2) { return ( <View style={{ flexDirection: 'row', height: 24, justifyContent: 'center', alignItems: 'center', marginBottom: 10 }}> <Text>正在加载数据...</Text> </View> ); } else if (this.state.showFoot === 0) { return ( <View> <Text>{/* 正常情况：不显示加载中 或 没有可加载的数据 */}</Text> </View> ); } } // 头部刷新 _onRefresh = () => { this.setState({isRefreshing:true}) //模拟去服务器拉取数据 setTimeout(()=>{ this.setState({isRefreshing:false}) },5000) }; _onEndReached = () => { // 如果是正在加载中或没有更多数据了，则返回 if (this.state.showFoot != 0) { return; } if (hasMoreData) { this.setState({showFoot: 2}); //模拟去服务器拉取更多数据 setTimeout(()=>{ hasMoreData = false; this.setState({showFoot: hasMoreData ? 0 : 1}); },5000) } else { this.setState({showFoot: 1}); } } }