FlatList 核心运用
<FlatList
data={this.state.stuList}
renderItem={this._renderItem}
keyExtactor={this._keyExtractor}
ItemSeparatorComponent={this._separator}
/>
this.state={
stuList:[{},{},{}]
}
_renderItem=({item})=>{
return ( <View>..</View>);
}
_keyExtractor=({item,index})=>{
return ( item.key.tostring());
}
_separator=>{
return( <View style={{height:1,backgroundColor:'#FFFFFF'}}/>);
}
运用上面的控件 就可以有下拉 和上滑 的效果 比如QQ里的刷新 和 网页里的加载
data,是一个多个对象的数组,在状态里用[] 添加
renderItem 是呈现在界面的代码段 几个对象就会出现几次
keyExtator 是一个对item的转义字段
ItemSaparaComponent 是一个用来间隔 <View> 的<View>

上面是代码的官方截图
下面是一个简单案例的效果图片

FlatList 核心运用的更多相关文章
- [RN] react-native FlatList 实现列表选中的最佳方式(刷新指定Item)
效果如下: 核心思路就是往数据源里面 给每条数据加一个选中状态. 如图在网络请求完成之后,给每条数据添加一个select的状态: data.list.forEach(item => item.s ...
- [RN] React Native FlatList跳转到顶部/底部
React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentCon ...
- Asp.Net WebApi核心对象解析(下篇)
在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...
- 如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念
一.前言 DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...
- 如何一步一步用DDD设计一个电商网站(三)—— 初涉核心域
一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...
- JS核心系列:浅谈原型对象和原型链
在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...
- JS核心系列:浅谈 call apply 与 bind
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
- ASP.NET Core的路由[2]:路由系统的核心对象——Router
ASP.NET Core应用中的路由机制实现在RouterMiddleware中间件中,它的目的在于通过路由解析为请求找到一个匹配的处理器,同时将请求携带的数据以路由参数的形式解析出来供后续请求处理流 ...
随机推荐
- 面试-java反射
问题:简述Java中的反射使用 答: 1.作用: 可以通过配置文件来动态配置和加载类,以实现软件工程理论里所提及的类与类,模块与模块之间的解耦.反射最经典的应用是spring框架. 2. 定义 反射简 ...
- 16: mint-ui移动端
1.1 mint-ui安装与介绍 官网:http://mint-ui.github.io/docs/#/zh-cn2/loadmore 1.安装与引用 // 安装Vue 2.0 npm instal ...
- STA 141A, Homework
STA 141A, Homework 2Due April 30th 2019 (by 8 am) Name:Student ID:Section:Names of your study mates: ...
- qt 串口
if(ui->connectSerialBtn->text() == tr("打开串口")) { //ui->showSerialInfo->setEnab ...
- HttpClient throws TaskCanceledException on timeout
error msg: HttpClient throws TaskCanceledException on timeout HttpClient is throwing a TaskCanceledE ...
- [转载]使用IEDriverServer.exe驱动IE11,实现自动化测试
转自:https://www.cnblogs.com/feiquan/p/8531618.html 下载地址: http://dl.pconline.com.cn/download/771640-1. ...
- selenium中CSS选择器定位
selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...
- R-画图
1.par(mar=c(8,5.2,8,5.2),new=TRUE,cex=1.5,mfrow=c(2,2)) (参考:http://blog.sina.com.cn/s/blog_6caea8b ...
- Oracle update语句更新值来自另一张表中的数据
task 任务表 role 角色表 两表之间必须有关联的字段 update task t set t.roleName = ( select r.name from role r where r.id ...
- 哆啦A梦css
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...