1,ListView組件用于顯示一個(gè)垂直的滾動(dòng)列表,其中的元素之間結(jié)構(gòu)近似而僅數(shù)據(jù)不同。
2,ListView更適于長(zhǎng)列表數(shù)據(jù),且元素個(gè)數(shù)可以增刪。和ScrollView不同的是,ListView并不立即渲染所有元素,而是優(yōu)先渲染屏幕上可見的元素。
3,ListView組件必須的兩個(gè)屬性是dataSource和renderRow。dataSource是列表的數(shù)據(jù)源,而renderRow則逐個(gè)解析數(shù)據(jù)源中的數(shù)據(jù),然后返回一個(gè)設(shè)定好格式的組件來(lái)渲染。
4,rowHasChanged函數(shù)也是ListView的必需屬性。這里我們只是簡(jiǎn)單的比較兩行數(shù)據(jù)是否是同一個(gè)數(shù)據(jù)(===符號(hào)只比較基本類型數(shù)據(jù)的值,和引用類型的地址)來(lái)判斷某行數(shù)據(jù)是否變化了。
export default class hyuxin extends Component {
// 初始化模擬數(shù)據(jù)
constructor(props) {
super(props);
//rowHasChanged函數(shù)也是ListView的必需屬性。這里我們只是簡(jiǎn)單的比較兩行數(shù)據(jù)是否是同一個(gè)數(shù)據(jù)(===符號(hào)只比較基本類型數(shù)據(jù)的值,和引用類型的地址)來(lái)判斷某行數(shù)據(jù)是否變化了。
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>
);
}
}
暫時(shí)listView就寫這樣,后續(xù)會(huì)自己總結(jié)寫一個(gè)小demo
本文參考于http://reactnative.cn/docs/0.42/using-a-listview.html#content