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. python 缩进问题

    200 ? "200px" : this.width)!important;} --> 介绍 在python中认为规定4个空格缩进,缩进的代码可以理解成一个块,但是使用缩进也 ...

  2. Json.Net学习笔记

    http://www.cnblogs.com/xiaojinhe2/archive/2011/10/28/2227789.html Newtonsoft.Json(Json.Net)学习笔记 http ...

  3. SQL Server 批量插入数据的两种方法(转)

    此文原创自CSDN TJVictor专栏:http://blog.csdn.net/tjvictor/archive/2009/07/18/4360030.aspx 在SQL Server 中插入一条 ...

  4. Adobe Photoshop CC 14.0简体中文特别版32位和64位下载

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. UVa11205 The Broken Pedometer

    // 题意:有P个LED灯,以及N个字符,要求选出个数最少的LED灯,使得即使只有这些灯正常工作,也能区分出这N个字符 // 题意抽象:输入两个整数P, N以及N行P列的01矩阵,找少的列,能区分所有 ...

  6. 推荐大家使用的CSS书写规范及顺序

    @设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...

  7. registerClassAlias()函数和getClassByAlias()函数

    flash.net 包中包含包级函数,可用于打开新的浏览器窗口,向服务器发送 URL 请求以及处理类别名. registerClassAlias()函数 public function registe ...

  8. 推荐系统之基于二部图的个性化推荐系统原理及C++实现

    1.引言 许多网站都喜欢让用户点击“喜欢/不喜欢”,“顶/反对”,也正是这种很简单的信息也可以利用起来对用户进行推荐!这里介绍一种基于网络结构的推荐系统! 由于推荐系统深深植根于互联网,用户与用户之间 ...

  9. Winform模拟post请求和get请求登录网站

    引言 最近有朋友问如何用winform模拟post请求,然后登录网站,稍微想了一下,大致就是对http报文的相关信息的封装,然后请求网站登录地址的样子.发现自己的博客中对这部分只是也没总结,就借着这股 ...

  10. 【JavaScript】apply和call的区别在哪?

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...