RN中关于ListView的使用
1. ListView dataSource
介绍:
ListView需要指定数据的来源。传入数据必须是数组,或者是字典里面嵌套数组
系统会根据你传入的数据自动生成section和row
每一个字典的key会被ListView拆分成一个section(小节,这里的section和原生的一样),如果你不指定sectionId,则key就是sectionId
如何使用。
在构造函数中指定ListView的取值策略,先new一个dataSource对象
constructor(props) {
super(props);
var ds =new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
}
rowHasChanged 可以是以下几种
1.getRowData(dataBlob, sectionID, rowID):表明我们将以何种方式从dataBlob(数据源)中提取出rowData,sectionID用于指定每一个section的标题名(在renderRow,renderHeader等方法中会默认拆开并作为参数传入)
2.getSectionHeaderData(dataBlob, sectionID):表明我们将以何种方式从dataBlob(数据源)中提取出HeaderData。HeaderData用于给每一个sectionHeader赋值
3.rowHasChanged(prevRowData, nextRowData):指定我们更新row的策略,一般来说都是prevRowData和nextRowData不相等时更新row
4.sectionHeaderHasChanged(prevSectionData, nextSectionData):指定我们更新sectionHeader的策略,一般如果用到sectionData的时候才指定
默认数据的提取策略
{ sectionID_1: { rowID_1: rowData1, ... }, ... }
或者:
==**{ sectionID_1: [ rowData1, rowData2, ... ], ... }**==
或者:
[ [ rowData1, rowData2, ... ], ... ]
作者:sidiWang
链接:https://www.jianshu.com/p/1293bb8ac969
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
大多数情况下我们会用到第二种(字典套数组)和第三种(纯数组),每一个数组对应的key系统会自动提取成sectionId。然后我们可以根据sectionId来判断所加载的section
为dataSource传递数据
cloneWithRows(dataBlob, rowIdentities)
dataBlob是原始数据源。在没有section的时候使用此方法
,传入一个数组。rowIdentities为可选类型,为数据源的每一项指明一个id
。默认的id为字符串'0','1','2'...dataBlob.count
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)
字典套数组的结构(有section),我们使用下面的方法为数据源赋值。sectionIdentities和rowIdentities都是可选类型
例子1-最简单的ListView实现。
//1。构造函数中声明
/*第一步我们创建了DataSource对象,提供了row更新的策略。
然后我们在初始化state的时候,初始化一个dataSource和一个data属性
*/
constructor(props) {
super(props);
var ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!=r2})
this.state={
dataSource:ds,
data:["h","h","h","h","h"]
}
}
//行方法
_renderRow(rowData,rowId)
{
return (
<Text>{rowData+''+rowId}</Text>
)
}
//listview 的使用。
/*
调用了dataSource对象提供的cloneWithRows方法给ListView的dataSource赋值,
并传入了数据源data。然后在renderRow方法中返回一个Text控件,将每一行的内容和rowId打印出来。
*/
<ListView
dataSource={this.state.dataSource.cloneWithRows(this.state.data)}>
renderRow={(rowData,sectionId,rowId)=>this._renderRow(rowData,rowId)}
</ListView>
例子2-实现一个带有section的ListView。
RN会根据你传入的数据源判断是否含有section,并调用cloneWithRowsAndSections把数据源传给ListView。如果你不指定sectionId,则RN会默认按之前提到过的数据结构取出相应的sectionId和rowId
注意,如果使用cloneWithRowsAndSections传入数据源,必须在构造方法里面传入sectionHeaderHasChanged方法
constructor(props) {
super(props);
var ds=new ListView.DataSource({
rowHasChanged:(r1,r2)=>r1!=r2,
sectionHeaderHasChanged:(s1,s2)=>s1!=s2
})
this.state={
dataSource:ds,
data:{a:['h','m'],b:['h1','m1'],c:['h2','m2']}
}
}
// section 是a, rowid 是0开头, rowdata是h,m
_renderRow(rowData,rowId,sectionId)
{
return (
<Text>{rowData+''+rowId+''+sectionId}</Text>
)
}
<ListView
dataSource={this.state.dataSource.cloneWithRowsAndSections(this.state.data)}>
renderRow={(rowData,sectionId,rowId)=>this._renderRow(rowData,rowId,sectionId)}
</ListView>
RN中关于ListView的使用的更多相关文章
- 解决在ScrollView中套用ListView显示不正常
最近在设计Android程序时,因为需要在ScrollView中添加一个ListView列表来显示一些信息.刚开始并没有想太多,但添加进去后才发现ListView不论怎样定义都只能显示一行,显示效果很 ...
- ScorllView中嵌套listView与Viewpager的焦点问题处理
解决进入该页面直接显示中的listview而不是从页面最顶端开始显示在setAdapter后调用listview的smoothScrollTo(0,20); 解决listview只能显示一条 需要重写 ...
- “Win10 UAP 开发系列”之 在MVVM模式中控制ListView滚动位置
这个扩展属性从WP8.1就开始用了,主要是为了解决MVVM模式中无法直接控制ListView滚动位置的问题.比如在VM中刷新了数据,需要将View中的ListView滚动到顶部,ListView只有一 ...
- 在Activity中响应ListView内部按钮的点击事件
最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在A ...
- Xamarin.Forms中的ListView的ItemTrapped事件与ItemSelected事件的区别
今天对Xamarin.Forms中的ListView的两个事件(ItemTrapped和ItemSelected)做了小小的研究,发现有以下几点区别: 1.ItemTrapped事件会优先被触发. 2 ...
- C#中使用ListView动态添加数据不闪烁并显示当前插入值
首先,自定义一个类ListViewNF,继承自 System.Windows.Forms.ListView class ListViewNF : System.Windows.Forms.ListVi ...
- 实现ScrollView中包含ListView,动态设置ListView的高度
ScrollView 中包含 ListView 的问题 : ScrollView和ListView会冲突,会导致ListView显示不全 <?xml version="1.0" ...
- 关于ScrollView中嵌套listview焦点滑动问题 解决
(第三种,第四种简单推荐使用) 在这里我要提出的是,listview能滚动的前提是:当listview本身的高度小于listview里的子view. 第一种方法 只需在MainActivity中 找到 ...
- Activity中与ListActivity中使用listview区别
Activity中与ListActivity中使用listview区别 一.Activity中与ListActivity中使用listview区别(本身没多大区别,只是ListActivity在lis ...
随机推荐
- R语言学习——输入与输出
导入数据: grades<-read.table("D:/ProgramData/test1.txt",sep="\t") 求均值:mean() 求方差: ...
- Discuz论坛管理的问题汇总
Discuz论坛在Linux上搭建成功了, 不得不说, 其功能是非常强大的, 可以满足已知的绝大多数的需求. 搭建完成后也有一些问题, 在这里汇总一下, 以便将来查阅. 1. 显示未处理用户信息, 但 ...
- Maven 插件管理
偶然与巧合 舞动了蝶翼 谁的心头风起 前赴而后继 万千人追寻 荒漠唯一菩提 似擦身相遇 或擦肩而去 命运犹如险棋 无数时间线 无数可能性 终于交织向你
- SOAP,RESTFull以及RPC的认识
a.一般的系统,开发都是针对数据库开发,不存在系统之间的交互,但是随着现实是有好多系统(好多DB,DB不开放),这些系统之间要进行交互,就像人一样要互相帮助.所以 可以通过一下的方式: 1. ...
- Hive环境的安装部署(完美安装)(集群内或集群外都适用)(含卸载自带mysql安装指定版本)
Hive环境的安装部署(完美安装)(集群内或集群外都适用)(含卸载自带mysql安装指定版本) Hive 安装依赖 Hadoop 的集群,它是运行在 Hadoop 的基础上. 所以在安装 Hive 之 ...
- [Flutter] 支持描边效果的Text
新版的flutter已经自带这个功能了.TextSyle 中一个shadow . 目前flutter中没找到很好的办法给Text增加描边.自己扩展了一个TextEx,可以实现简单的描边效果,能满足大部 ...
- C++官方文档-this
#include <iostream> using namespace std; class Dummy { public: int x; Dummy() : x() { } ; Dumm ...
- centos上自动执行脚本执行php文件
1 先编写执行PHP文件的脚本 vi php.sh #!/bin/sh /usr/bin/php /etc/1.php 2把php.sh添加到自动执行任务中 cd /etc/ vi crontab * ...
- c# 导入导出excel表格式
c#使用代码导入excel时,当遇到纯数字且大于15位时会出现编码混乱(表现为科学计数法),要想呈现与excel表中纯数字格式和在数据库中呈现纯数字,操作如下: 完成即可. 导出取决于导入的内容排版.
- ASCII和万国码
ASCII和万国码 什么是ASCII 计算机的起初是使用内存中的0101来表示数和机器码.如何用内存中的bit来表示文本一直困扰着人们,毕竟人类主要的信息展示是文字,而不是苦涩的0101.后来ASCI ...