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. MES总结:CBF.Common 文件Net下的有类型转换

    MES总结:CBF.Common 文件Net下的有类型转换. using System.Text;using System.Data;using System.ComponentModel;using ...

  2. 学习C++的一些问题总结

    C++ 问题 (一) int main() { int i,j,m,n; i=8; j=10; m=++i+j++;  //++i是先递加再使用,j++是先使用再递加,故:9+10=19 n=++i+ ...

  3. css 精灵的用法

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-12) 是指将多个图整合到一张图上,避免多次请求服务器下载. 主要使用CSS background-position 属 ...

  4. Spring三种实例化Bean的方法

    1.实例化bean的三种方法:(1) 构造器<!-- 体验1 --><bean id="personService" class="com.persia ...

  5. c# 轻量级ORM框架 实现(一)

    发布一个自己写的一个轻量级ORM框架,本框架设计期初基于三层架构.所以从命名上来看,了解三层的朋友会很好理解. 设计该框架的目的:不想重复的写增删改查,把精力放到功能实现上. 发布改框架的原因:希望给 ...

  6. Python在Windows上的安装

    1:下载 http://dlsw.baidu.com/sw-search-sp/soft/6e/17016/python-3.3.5.1395976247.msi 2:直接next安装 3:验证安装是 ...

  7. Android Launcher 怎样去掉主菜单,全部应用摆在桌面,相似小米桌面

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  8. hdu 5594 ZYB's Prime 最大流

    ZYB's Prime Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5 ...

  9. TP复习2

    ## ThinkPHP 3.1.2 输出和模型使用#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:M() 等效为 new Model();$m=M('Us ...

  10. Progressive JPEG

    和Baseline一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储在JPEG文件中.打开文件过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰 ...