ListView组件显示垂直滚动列表,但类似的结构,数据。
ListView适用于长列表的数据,项目的数量可能随时间改变。和Scrollview不同,ListView只render显示在屏幕上元素,并不是所有的元素。
ListView组件需要两个props:数据源和renderRow。数据源是信息的来源列表。renderRow从数据源取一条数据并返回一个格式化的组件来render(呈现)。
这个示例创建了一个使用硬编码的数据的简单列表视图。它首先初始化dataSourcethat将用于填充列表视图。数据源中的每一项然后呈现为一个文本组件。最后呈现ListView和所有文本组件。
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// Initialize the hardcoded data
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}
最常见的用途之一ListView显示从服务器获取数据,要做到这一点,你需要了解在RN的网络。
关注公众号:
更多精彩文章等你来!!!
[1]:参考文献 http://facebook.github.io/react-native/docs/using-a-listview.html