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. until与till的用法归纳

    until与till的用法归纳 崔荣斌 until和till两者都可作介词.连词,一般情况下可以互换使用.用于肯定句时,主句的动词只用延续性的,它所表示的动作一直延续到till或until表示的时间为 ...

  2. 使用Android Studio与ArcGIS Android SDK的开发环境部署和HelloWorld

    android studio(以下简称AS)是google推荐的android专用IDE,替代目前主流的eclipse,另外arcgis也把AS作为推荐的android IDE 本文不介绍androi ...

  3. 使用 preferredStatusBarStyle 设置状态栏颜色

    iOS9之前,在plist文件中 插入一个新的key,名字为View controller-based status bar appearance,并将其值设置为NO. 然后敲入代码: [UIAppl ...

  4. IIS配置(安装IIS、.Net、更改IIS Log目录位置)

    #安装IIS..NetFramework 3.5 Import-Module servermanager Get-WindowsFeature web-* | ? {$_.Name -ne " ...

  5. 从客户端(&)中检测到有潜在危险的 Request.Path 值解决方案

    出这个问题基本上是在转址字符串中有非法字符“<”,'&'之类的. 方案1: 如果仅仅只是转换页面,传参时出现的问题,可对数据加密: 绑定数据传值时加密 <%#Server.UrlE ...

  6. 关于ORACLE DUAL表

    1.DUAL表的用途 Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中--查看当前连接用户 SQL> select user from d ...

  7. Effective C++笔记04:设计与声明

    条款18:让接口easy被正确使用,不易被误用 1,好的接口非常easy被正确使用,不easy被误用.你应该在你的全部接口中努力达成这些性质. 2,"促进正使用"的办法包含接口的一 ...

  8. mvc cookie

    Response.Cookies["userName"].Value = "ddd"; <%     if (Request.Cookies[" ...

  9. windows7添�windows2008R2域配置

    server端配置: windows2008R2 WIN+R -> dcmopro -> 下一步 -> .... client配置: windows7 配置 DNS,如图: 计算机 ...

  10. [Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

    In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router ...