RN 列表组件之四 ListView

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
        });
    }

猜你喜欢

转载自blog.csdn.net/snow51/article/details/80652272
RN