首页 > 代码库 > ListView
ListView
ListView
组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。
ListView
更适于长列表数据,且元素个数可以增删。和ScrollView
不同的是,ListView
并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。
ListView
组件必须的两个属性是dataSource
和renderRow
。dataSource
是列表的数据源,而renderRow
则逐个解析数据源中的数据,然后返回一个设定好格式的组件来渲染。
下面的例子创建了一个简单的ListView
,并预设了一些模拟数据。首先是初始化ListView
所需的dataSource
,其中的每一项(行)数据之后都在renderRow
中被渲染成了Text
组件,最后构成整个ListView
。rowHasChanged
函数也是ListView
的必需属性。
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={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
// 注册应用(registerComponent)后才能正确渲染
// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent(‘ListViewBasics‘, () => ListViewBasics);
ListView
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。