React Native
列表视图 ListView
ListView 是一个特殊的 ScrollView，用来展示一个纵向排列结构相似的内容。
ListView 可以高效地处理大量数据，它不像 ScrollView 将所有包含其中的组件都渲染出来，它只会渲染当前会显示在屏幕上的内容。
ListView 组件创建时需要设置两个属性：
-
dataSource：列表视图显示内容的数据源。 -
renderRow：渲染每行内容的方法。
下面展示一个实例：
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
Text,
View
} from 'react-native';
export default class HelloWorld 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}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
这个例子中，先创建一个 ListView.DataSource，在创建时，需要提供一个 rowHasChanged 函数，在当数据源中的数据发生变化时被触发。
根组件被创建时，我们往数据源中写入一些数据。在 renderRow 函数中，将每一行数据渲染成一个 Text 组件。
运行效果如下：
ListView
