簡介
ListView - 一個(gè)核心組件荞膘，用于高效地顯示一個(gè)可以垂直滾動(dòng)的變化的數(shù)據(jù)列表。最基本的使用方式就是創(chuàng)建一個(gè)ListView.DataSource數(shù)據(jù)源，然后給它傳遞一個(gè)普通的數(shù)據(jù)數(shù)組，再使用數(shù)據(jù)源來實(shí)例化一個(gè)ListView組件卿啡，并且定義它的renderRow回調(diào)函數(shù)，這個(gè)函數(shù)會(huì)接受數(shù)組中的每個(gè)數(shù)據(jù)作為參數(shù)菱父，返回一個(gè)可渲染的組件（作為listview的每一行）牵囤。
基本用法
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
換一種寫法并添加點(diǎn)擊事件
class ListViewSample extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
/>
);
}
_renderRow(rowData : string , rowID : number){
return (
<TouchableHighlight onPress={() => this._pressRow(rowData, rowID)}>
<View>
<Text>
{rowData}
</Text>
</View>
</TouchableHighlight>
);
}
_pressRow(url: string, rowID: number){
this._alert(url);
switch (rowID) {
case 0:
break;
case 1:
break;
default:
break;
}
}
_alert(url : string){
AlertIOS.alert(
'提醒',
''+ url,
[{text: 'Cancle', onPress: () => console.log('Foo Pressed!')},
{text: 'OK', onPress: () => console.log('Bar Pressed!')},]
);
}
}
屬性
View屬性
ScrollView 相關(guān)屬性樣式全部繼承
dataSource ListViewDataSource
ListView.DataSource實(shí)例（列表依賴的數(shù)據(jù)源）
initialListSize number
指定在組件剛掛載的時(shí)候渲染多少行數(shù)據(jù)。用這個(gè)屬性來確保首屏顯示合適數(shù)量的數(shù)據(jù)滞伟，而不是花費(fèi)太多幀逐步顯示出來揭鳞。
在ListView標(biāo)簽下添加：
initialListSize = {10}
onEndReachedThreshold
調(diào)用onEndReached之前的臨界值，單位是像素梆奈。
<a>PS:這個(gè)值如果不設(shè)置會(huì)導(dǎo)致onEndReached無法正常使用</a>
pageSize
每次事件循環(huán)（每幀）渲染的行數(shù)野崇。
在ListView標(biāo)簽下添加：
pageSize = {10}
removeClippedSubviews
用于提升大列表的滾動(dòng)性能。需要給行容器添加樣式overflow:'hidden'亩钟。（Android已默認(rèn)添加此樣式）乓梨。此屬性默認(rèn)開啟。
scrollRenderAheadDistance number
當(dāng)一個(gè)行接近屏幕范圍多少像素之內(nèi)的時(shí)候清酥，就開始渲染這一行扶镀。
方法
renderFooter renderHeader
頁頭與頁腳會(huì)在每次渲染過程中都重新渲染（如果提供了這些屬性）。如果它們重繪的性能開銷很大焰轻，把他們包裝到一個(gè)StaticContainer或者其它恰當(dāng)?shù)慕Y(jié)構(gòu)中臭觉。頁腳會(huì)永遠(yuǎn)在列表的最底部，而頁頭會(huì)在最頂部。
onEndReached
當(dāng)所有的數(shù)據(jù)都已經(jīng)渲染過蝠筑，并且列表被滾動(dòng)到距離最底部不足onEndReachedThreshold個(gè)像素的距離時(shí)調(diào)用狞膘。原生的滾動(dòng)事件會(huì)被作為參數(shù)傳遞。譯注：當(dāng)?shù)谝淮武秩緯r(shí)什乙，如果數(shù)據(jù)不足一屏（比如初始值是空的）挽封，這個(gè)事件也會(huì)被觸發(fā)。
onChangeVisibleRows
當(dāng)可見的行的集合變化的時(shí)候調(diào)用此回調(diào)函數(shù)臣镣。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可見行辅愿，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有剛剛改變了可見性的行，其中如果值為true表示一個(gè)行變得可見忆某，而為false表示行剛剛離開可視區(qū)域而變得不可見点待。
renderRow
從數(shù)據(jù)源(Data source)中接受一條數(shù)據(jù)，以及它和它所在section的ID褒繁。返回一個(gè)可渲染的組件來為這行數(shù)據(jù)進(jìn)行渲染。默認(rèn)情況下參數(shù)中的數(shù)據(jù)就是放進(jìn)數(shù)據(jù)源中的數(shù)據(jù)本身馍忽，不過也可以提供一些轉(zhuǎn)換器棒坏。
如果某一行正在被高亮（通過調(diào)用highlightRow函數(shù)），ListView會(huì)得到相應(yīng)的通知遭笋。當(dāng)一行被高亮?xí)r坝冕，其兩側(cè)的分割線會(huì)被隱藏。行的高亮狀態(tài)可以通過調(diào)用highlightRow(null)來重置瓦呼。
renderSeparator
如果提供了此屬性喂窟，一個(gè)可渲染的組件會(huì)被渲染在每一行下面，除了小節(jié)標(biāo)題的前面的最后一行央串。在其上方的小節(jié)ID和行ID磨澡，以及鄰近的行是否被高亮?xí)鳛閰?shù)傳遞進(jìn)來。
效果
引用：http://reactnative.cn/docs/0.27/getting-started.html#content
