ListView,在react-native 版本0.46被弃用了!
@属性整理(可以使用所有ScrollView的属性)
rowHasChanged —–当行数据放生变化时,只更新变化的行数据
pageSize ———-限制频率的行渲染
dataSource ——–列表的数据源
1、创建ListViewDataSource对象,并用其进行数据变更的比较。
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
let data = ['每天', '更新', '一点']
this.state = {
dataSource: ds.cloneWithRows(data),
};
2、传递数组:原始输入数据可以是简单的字符串数组,也可以是复杂嵌套的对象——分不同区(section)各自包含若干行(row)数据。
let data = ['每天', '更新', '一点点']
this.setState({
dataSource: ds.cloneWithRows(data),
})
3、使用数据源来实例化一个ListView组件,并且定义它的renderRow回调函数
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>} //渲染行数据
/>
4、更新datasource中的数据,请调用cloneWithRows方法(如果用到了section,则对应cloneWithRowsAndSections方法)。
//clone方法会自动提取新数据并进行逐行对比(使用rowHasChanged方法中的策略),这样ListView就知道哪些行需要重新渲染了
let newArr = ['更新','再','更新']
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newArr),
});
initialListSize —–组件刚挂载的时候渲染多少行数据
onEndReached —-当列表滚动到底部不足onEndReachedThreshold个像素的时候触发此回调
removeClippedSubviews —-提升大列表的滚动性能,行容器需添样式overflow:’hidden’,默认开启
renderRow —–(rowData, sectionID, rowID, highlightRow) => renderable;从数据源(Data source)中接受一条数据,以及它和它所在section的ID.
renderSectionHeader ——(sectionData, sectionID) => renderable;每个小节(section)渲染一个粘性的标题。可以使用 stickySectionHeadersEnabled来决定是否启用其粘性特性。
renderSeparator (sectionID, rowID, adjacentRowHighlighted) => renderable;一个可渲染的组件会被渲染在每一行下面
重点:列表依赖的数据源的结构长啥样子
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
//可以接受4个参数:
getRowData(dataBlob, sectionID, rowID);
getSectionHeaderData(dataBlob, sectionID);
rowHasChanged(prevRowData, nextRowData);
sectionHeaderHasChanged(prevSectionData, nextSectionData);
//填充数据,参数二可选
cloneWithRows(dataBlob, rowIdentities)
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)
最近在数据做更新的时候有用到这个
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged:(row1, row2) => row1 !== row2,
})
tempDataSource: [],
}
}
componentDidMount() {
//this.getData();
let data = ['每天', '进步', '一点', '点'];
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data),
tempDataSource: data,
});
}
···
<ListView
contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}
dataSource={this.state.dataSource}
enableEmptySections={true}
pageSize={3} bounces={false}
renderRow={this._renderEditItem.bind(this)}
/>
···
_isAction(rowData) {
let array = this.state.tempDataSource.slice();
let index = array.indexOf(rowData);
array.splice(index, 1);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(array),
tempDataSource: array
});
}