前言
眼看很多公司都開(kāi)始嘗試使用ReactNative,達(dá)到跨平臺(tái)開(kāi)發(fā)锨用，最近也寫(xiě)了很多文章丰刊，希望讓更多想了解的同學(xué)快速上手ReactNative.
如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo
ListView原理
- ListView內(nèi)部是通過(guò)ListViewDataSource這個(gè)對(duì)象增拥，顯示數(shù)據(jù)啄巧，因此使用ListView必須先創(chuàng)建ListViewDataSource對(duì)象。
- ListViewDataSource構(gòu)造方法(創(chuàng)建對(duì)象):可選擇性傳入4個(gè)參數(shù),描述怎么提取數(shù)據(jù)掌栅，怎么刷新cell
- 這些參數(shù)：都是函數(shù)秩仆，當(dāng)產(chǎn)生對(duì)應(yīng)的事件的時(shí)候，會(huì)自動(dòng)執(zhí)行這些函數(shù).
構(gòu)造函數(shù)可以接受下列四種參數(shù)（都是可選）：
getRowData(dataBlob, sectionID, rowID);
getSectionHeaderData(dataBlob, sectionID);
rowHasChanged(prevRowData, nextRowData);
sectionHeaderHasChanged(prevSectionData, nextSectionData);
- ListViewDataSource為L(zhǎng)istView組件提供高性能的數(shù)據(jù)處理和訪問(wèn)猾封。我們需要調(diào)用clone方法從原始輸入數(shù)據(jù)中抽取數(shù)據(jù)來(lái)創(chuàng)建ListViewDataSource對(duì)象澄耍。
- 要更新datasource中的數(shù)據(jù)，請(qǐng)（每次都重新）調(diào)用cloneWithRows方法（如果用到了section忘衍，則對(duì)應(yīng)cloneWithRowsAndSections方法）clone方法會(huì)自動(dòng)提取新數(shù)據(jù)并進(jìn)行逐行對(duì)比（使用rowHasChanged方法中的策略）逾苫，這樣ListView就知道哪些行需要重新渲染了
ListView基本使用步驟
- 1.創(chuàng)建數(shù)據(jù)源卿城，但還沒(méi)有給它傳遞數(shù)據(jù)
- 使用state保存數(shù)據(jù)源枚钓，因?yàn)閿?shù)據(jù)源的數(shù)據(jù)改變的時(shí)候，需要刷新界面瑟押。
-
ListView.DataSource:獲取ListViewDataSource構(gòu)造方法 -
ListViewDataSource構(gòu)造方法:決定ListView怎么去處理數(shù)據(jù)搀捷，需要傳入一個(gè)對(duì)象，這個(gè)對(duì)象有四個(gè)可選屬性多望，都是方法- getRowData(dataBlob, sectionID, rowID); 怎么獲取行數(shù)據(jù)
- getSectionHeaderData(dataBlob, sectionID); 怎么獲取每一組頭部數(shù)據(jù)
- rowHasChanged(prevRowData, nextRowData); 決定什么情況行數(shù)據(jù)才發(fā)生改變嫩舟，當(dāng)行數(shù)據(jù)發(fā)生改變，就會(huì)繪制下一行cell
- sectionHeaderHasChanged(prevSectionData, nextSectionData);決定什么情況頭部數(shù)據(jù)才發(fā)生改變怀偷，當(dāng)行數(shù)據(jù)發(fā)生改變家厌，就會(huì)繪制下一行cell
- 注意：初始化ListViewDataSource的時(shí)候，如果不需要修改提取數(shù)據(jù)的方式椎工，只需要實(shí)現(xiàn)rowHasChanged饭于，告訴什么時(shí)候刷新下一行數(shù)據(jù).
- 注意：默認(rèn)ListViewDataSource有提取數(shù)據(jù)方式蜀踏，可以使用默認(rèn)的提取方式.
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
}
- 2.給數(shù)據(jù)源設(shè)置數(shù)據(jù)
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
// 給數(shù)據(jù)源設(shè)置數(shù)據(jù),創(chuàng)建新的數(shù)據(jù),不過(guò)保存了之前的行改變方法屬性
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};
}
- 3.實(shí)現(xiàn)數(shù)據(jù)源方法，確定cell
- 這個(gè)方法會(huì)自動(dòng)傳入四個(gè)參數(shù)(rowData,sectionID,rowID,highlightRow)
- rowData:當(dāng)前行數(shù)據(jù)
- sectionID:當(dāng)前行所在組ID
- rowID：哪一行的角標(biāo)
- highlightRow:高亮函數(shù)
render() {
return (
<View style={{flex:1}}>
<ListView dataSource={this.state.ds}
renderRow={this._renderRow.bind(this)}
/>
</View>
)
}
// 實(shí)現(xiàn)數(shù)據(jù)源方法,每行cell外觀
_renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<View>
<Text>{rowData}</Text>
</View>
);
}
ListView分割線
// 哪一組,哪一行,相鄰行是否高亮
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
console.log(sectionID,rowID,adjacentRowHighlighted);
return (
<View style={{height:1,backgroundColor:'black'}}></View>
)
}
ListView頭部視圖
_renderHeader() {
return (
<View>
<Text>頭部視圖</Text>
</View>
)
}
ListView尾部視圖
_renderFooter() {
return (
<View>
<Text>尾部視圖</Text>
</View>
)
}
ListView點(diǎn)擊cell高亮
_renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<TouchableOpacity onPress={()=>{
AlertIOS.alert(rowID);
highlightRow(sectionID,rowID)
}}>
<View>
<Text>{rowData}</Text>
</View>
</TouchableOpacity>
);
}
