ListView相对于View的优点就在于可以不用一下子就把数据加载完,而是滑动着加载着数据,可以缓解数据加载,避免软件卡死。

官方文档:https://facebook.github.io/react-native/docs/listview.html#content

简单使用:

constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
};
}
<ListView
contentContainerStyle={{flexDirection: 'row',flexWrap: 'wrap', justifyContent:'center'}}
dataSource={this.state.dataSource}
initialListSize={14}
renderRow={(rowData) =><Text>{rowData}</Text>}
/>

contentContainerStyle:设置list的样式

dataSource:数据源

initialListSize:官方文档的解释是指定在组件刚挂载的时候渲染多少行数据,但是在实际运用的时候,测试的根本不是这么回事儿...(react版本0.23.0)

renderRow:function();(rowData, sectionID, rowID, highlightRow) => renderable

从数据源(dataSource)中接受一条数据,以及数据和数据所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。

默认情况下参数中的数据就是放进数据源中的数据本身,不过也可以提供一些转换器。

ListView还有其它的一些设置,详细可查看官方文档。

ReactNative学习-ListView的更多相关文章

  1. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  2. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  3. React-Native学习指南

    React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React ...

  4. [转] 整理了一份React-Native学习指南

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React ...

  5. 一份React-Native学习指南-感谢分享

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React ...

  6. 整理了一份React-Native学习指南

    原文:  http://www.w3ctech.com/topic/909 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull ...

  7. React JS和React-Native学习指南

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React- ...

  8. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  9. Android UI学习 - ListView (android.R.layout.simple_list_item_1是个什么东西)

    Android UI学习 - ListView -- :: 标签:Android UI 移动开发 ListView ListActivity 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始 ...

随机推荐

  1. tableviewcell 系统工具删除:左滑删除,选中多个删除

    在编辑tableview的时候,我们有时候会需要编辑对一些cell进行删除(增加),在这个时候,我们最好用系统的方法来进行增删的操作 // // text1Controller.m // text / ...

  2. hdoj 5358 First One

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5358 一开始一直以为是一道数学题,在找有什么规律化简Log2(S(i,j)),结束了以后才造  ⌊lo ...

  3. 创建类模式(五):单例(Singleton)

    定义 确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式一般情况下通过使用private的构造函数确保了在一个应用中只产生一个实例,并且是自行实例化. 和静态变量的区别 虽然 ...

  4. 无责任Windows Azure SDK .NET开发入门篇二[使用Azure AD 进行身份验证--2.1使用Azure AD需要了解几个概念]

    2.1使用Azure AD需要了解几个概念 l Azure AD目录 当你注册 Microsoft 云服务时,便会获得一个 Azure AD 目录.你可根据需要创建更多的目录.例如,可以将第一个目录保 ...

  5. (C#)使用队列(Queue)解决简单的并发问题

    (C#)使用队列(Queue)解决简单的并发问题 2015-07-16 13:04 13265人阅读 评论(8) 收藏 举报  分类: Asp.Net(8)  版权声明:本文为博主原创文章,未经博主允 ...

  6. c++常见输入方法[持续更新]

    字符串输入 cin>> 使用空格确认字符串结束位置,保留换行符在输入队列当中 单个字符读取 cin.get(), cin.get(char) 每次读取一行: cin.getline(cha ...

  7. (剑指Offer)面试题33:把数组排成最小的数

    题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路: 1.全 ...

  8. How can I terminate a thread that has a seperate message loop?

    http://www.techques.com/question/1-10415481/How-can-I-terminate-a-thread-that-has-a-seperate-message ...

  9. SQL Server2005中使用XML-数据类型、查询与修改

    SQL 2005引进了XML数据类型,可以直接将XML当作字符串直接存入该列. 这样可以不需要对它进行XML解析. USE AdventureWorks -- 创建一个送货排程表 CREATE TAB ...

  10. nginx-1.4.4 + tcp_proxy_module手动编译安装

    Nginx开源软件默认没有提供TCP协议的负载均衡,下面记录一下我的安装过程: 1. 下载nginx最新稳定版的源码 mkdir /software cd /software yum install ...