国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > React Native控件之Listview

React Native控件之Listview

来源:程序员人生   发布时间:2016-09-26 08:20:10 阅读次数:2851次

ListView组件用于显示1个垂直的转动列表,其中的元素之间结构近似而仅数据不同。

ListView更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,ListView其实不立即渲染所有元素,而是优先渲染屏幕上可见的元素。

ListView组件必须的两个属性是dataSourcerenderRowdataSource是列表的数据源,而renderRow则逐一解析数据源中的数据,然后返回1个设定好格式的组件来渲染。

下面的例子创建了1个简单的ListView,并预设了1些摹拟数据。首先是初始化ListView所需的dataSource,其中的每项(行)数据以后都在renderRow中被渲染成了Text组件,最后构成全部ListView

rowHasChanged函数也是ListView的必须属性。这里我们只是简单的比较两行数据是不是是同1个数据(===符号只比较基本类型数据的值,和援用类型的地址)来判断某行数据是不是变化了。

import React, { Component } from 'react'; import { AppRegistry, ListView, Text, View } from 'react-native'; class ListViewBasics extends Component { // 初始化摹拟数据 constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' ]) }; } render() { return ( <View style={{paddingTop: 22}}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> </View> ); } } // 注册利用(registerComponent)后才能正确渲染 // 注意:只把利用作为1个整体注册1次,而不是每一个组件/模块都注册 AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

ListView的1个经常使用场景就是从服务器端取回列表数据然后显示,要实现这1进程,你可能还需要学习React Native的网络相干用法.

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生