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. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

  2. QT输入输出(一) 之 QDataStream 测试

    QT提供了两个高级别的流类---QDataStream和QTextStream,可以从任意的输入输出设备读取或写入数据. QDataStream用于读写二进制数据,它的优点是:在读写数据的时候已经严格 ...

  3. ngTbale假分页实现排序、搜索、导出CSV等功能

    一. ngTable功能简化 使用ngTable经常有分页,排序,过滤等功能,实现诸多功能较为麻烦.为了方便开发过程,可以抽取一些table共同点写一个公有方法. 注意: 1. 由于很多特别的需求,可 ...

  4. 【JUnit】EasyMock用法总结

    使用EasyMock的总体步骤 1.生成Mock接口 IService mockService = EasyMock.createMock("name", IService.cla ...

  5. Libvirt 虚拟化库剖析

    讲到向外扩展计算(比如云计算),libvirt 可能是您从未听说过的最重要的库之一.libvirt 提供一种虚拟机监控程序不可知的 API 来安全管理运行于主机上的来宾操作系统.libvirt 本身不 ...

  6. JAVA核心技术--继承

    1.继承:向上追溯,对同一批类的抽象,延续和扩展父类的一切信息! 1)关键字:extends      例如,父类是Animal,子类是Dog;   eg: public class Dog exte ...

  7. 更改SQL数据库的繁体数据为简体

    上一篇说到,公司需要把所有的系统逐步更改为简体,一些系统可以保持原先的繁体数据,而有一些系统应使用部门的要求,必须要更改为简体,由于程序很大,报表也多,修改程序转换显示的可能性不大,故所以打算把数据库 ...

  8. php中curl不支持https的解决办法

    在php程序中使用curl去访问https站点时,报错:Protocol https not supported or disabled in libcurl 该错误信息表示php当时编译时使用的cu ...

  9. 连接SQLServer时提示“但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时”解决办法

    解决:"已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - 等待的操作过时" 官方问题介绍:http: ...

  10. Codeforces Round #146 (Div. 1) B. Let's Play Osu! dp

    B. Let's Play Osu! 题目连接: http://www.codeforces.com/contest/235/problem/B Description You're playing ...