ListView 組件 用于顯示一個(gè)垂直的滾動(dòng)列表含鳞，其中的元素之間結(jié)構(gòu)近似而僅數(shù)據(jù)不同。
ListView 更適于長列表數(shù)據(jù)，且元素個(gè)數(shù)可以增刪。和 ScrollView 不同的是京景，ListView 并不立即渲染所有元素，而是優(yōu)先渲染屏幕上可見的元素炬灭。
ListView 組件必須的兩個(gè)屬性是 dataSource 和 renderRow醋粟。
dataSource 是列表的數(shù)據(jù)源靡菇，而 renderRow 則逐個(gè)解析數(shù)據(jù)源中的數(shù)據(jù)重归，然后返回一個(gè)設(shè)定好格式的組件來渲染。
下面的例子創(chuàng)建了一個(gè)簡單的 ListView 厦凤，并預(yù)設(shè)了一些模擬數(shù)據(jù)鼻吮。
首先是初始化 ListView 所需的dataSource，其中的每一項(xiàng)（行）數(shù)據(jù)之后都在 renderRow 中被渲染成了Text 組件较鼓，最后構(gòu)成整個(gè) ListView椎木。
rowHasChanged 函數(shù)也是ListView 的必需屬性。這里我們只是簡單的比較兩行數(shù)據(jù)是否是同一個(gè)數(shù)據(jù)（=== 符號只比較基本類型數(shù)據(jù)的值博烂，和引用類型的地址）來判斷某行數(shù)據(jù)是否變化了香椎。
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
Text,
View } from 'react-native';
class MyApp extends Component {
// 初始化模擬數(shù)據(jù)
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>
);
}
}
// 注冊應(yīng)用(registerComponent)后才能正確渲染
// 注意：只把應(yīng)用作為一個(gè)整體注冊一次，而不是每個(gè)組件/模塊都注冊
AppRegistry.registerComponent('MyApp', () => MyApp);
ListView 的一個(gè)常用場景就是從服務(wù)器端取回列表數(shù)據(jù)然后顯示.
