前言

FlatList是最为常用的控件，主要包含：数据加载列表，点击高亮选择，上拉刷新，下拉加载。

效果演示

代码

import React from 'react';import {FlatList, Image, Text,  TouchableWithoutFeedback, View
} from 'react-native';const appendZero = (n) => n.toLocaleString({}, {minimumIntegerDigits: 2});const tag = "FlatListDemo";let hour = 10;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:hour+":00:"+appendZero(i, 10),eventTxt:"有人在门前逗留"});}this.state = {isRefreshing: false,showFoot: 0,data: data}this.curItem = undefined;this.requestData = false;this.hasMoreData = true;}render() {return (<FlatListdata={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}/>{(this.curItem!==undefined && (this.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);this.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 = () => {console.log(tag,"_onEndReached",this.state.showFoot,this.hasMoreData,this.requestData);// 如果是正在加载中或没有更多数据了，正在请求数据，则返回if (this.state.showFoot != 0 || this.requestData) {return;}if (this.hasMoreData) {this.setState({showFoot: 2});//模拟去服务器拉取更多数据this.requestData = true;setTimeout(()=>{let data = []hour++;for (let i = 0; i < 50; i++) {data.push({time:hour+":00:"+appendZero(i, 10),eventTxt:"有人在门前逗留"});}let mergeData = this.state.data.concat(data);this.hasMoreData = true;this.setState({showFoot: this.hasMoreData ? 0 : 1,data:mergeData});this.requestData = false;},5000)} else {this.setState({showFoot: 1});}}
}

源码下载

===> 放在CSDN服务器上云保存，需要点击下载

总结

基本功能都有的，为了代码的简洁，加强可读性，拉取数据列表部分的实现模拟实现。

RN FlatList使用Demo(附源码)相关推荐

turbo c实现雷电小游戏demo(附源码)
计算机图形学的课后大作业要求turbo c做一个小动画, 故花了2天左右的时间做了一个雷电的小游戏, 也参考了一些例子, 代码比较简单, 只有400多行, 结构比较简单, 代码已经传到csdn,附链接 ...
一个Quake2的世界浏览器DEMO(附源码)
非常早期的一款3D作品, 卡马克的经典作品, Quake2作为研究BSP来讲无疑是非常有价值的,下面是Quake2的浏览器截图. 下载地址: http://files.cnblogs.com/Peri ...
Spring Web Flow 入门demo（三）嵌套流程与业务结合附源码
转载地址 ; http://blog.csdn.net/hejingyuan6/article/details/46723021 上篇博客我们说spring web Flow与业务结合的方式主要有三种 ...
客户端服务器通信demo（续） -- 使用二进制协议（附源码）
转载连接: http://blog.csdn.net/zhuweisky/article/details/11827797 在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类: ...
VC++利用笔记本自带摄像头扫二维码功能(附源码demo)
VC++开发常用功能一系列文章 (欢迎订阅,持续更新...) 第8章:VC++利用笔记本自带摄像头扫二维码功能(附源码demo) 源代码demo已上传到百度网盘:永久生效 ,代码实现了打开笔记本 ...
java实现高德地图app,Android 高德地图入门demo，最新高德地图实现方法，附源码及apk...
[实例简介] Android 高德地图入门demo,最新高德地图实现方法,附源码及apk [实例截图] [核心代码] GaoDeDemo ├── GaoDeDemo │ ├── app │ │ ...
Babylonjs 最全demo集合（内附源码)
Babylonjs 最全demo集合 (内附源码) 为了方便学习Babylonjs引擎,整理了130多个示例,并且所有的例子全部本地化了,可以离线部署.以后会分别讲解. 一.源码模块介绍 Animat ...
【javaCV基于虹软人脸识别demo添加电脑摄像头人脸识别（图片保存，视频保存，摄像头显示等）（附源码）】
javaCV基于虹软人脸识别demo添加电脑摄像头人脸识别(图片保存,视频保存,摄像头显示等 )(附源码) 文章目录 javaCV基于虹软人脸识别demo添加电脑摄像头人脸识别(图片保存,视频保存,摄 ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

RN FlatList使用Demo(附源码)

前言

效果演示

代码

源码下载

总结

RN FlatList使用Demo(附源码)相关推荐

最新文章

热门文章