React-Native的FlatList

1. 支持水平布局模式。
2. 行組件顯示或隱藏時(shí)可配置回調(diào)事件。
3. 支持單獨(dú)的頭部組件。
4. 支持單獨(dú)的尾部組件。
5. 支持自定義行間分隔線。
6. 支持下拉刷新。
7. 支持上拉加載。
8. 支持跳轉(zhuǎn)到指定行（ScrollToIndex）。
9. 支持多列布局。

render很重要

<!--bonusList是數(shù)據(jù)源，onEndReachedThreshold防止過(guò)度刷新-->
render() {
        if (lodash.isNil(this.state.bonusList) || this.state.bonusList.length === 0){
            return (
                <BonusRecordEmptyView> </BonusRecordEmptyView>
            )
        }else {
            return (
                <View style={styles.container}>
                    <FlatList
                        style={{height:'100%'}}
                        data={this.state.bonusList}
                        renderItem={this.flatListContent}
                        ListFooterComponent={this._flatListFooterComponent.bind(this)}
                        onEndReached= {this._flatListOnEndReached.bind(this)}
                        onEndReachedThreshold={0.2}
                        refreshing={this.state.refreshing}
                        onRefresh={() => {this.refresh()}}
                    />
                </View>
            )
        }
    }

renderItem

<!--內(nèi)容控件展示-->
flatListContent({item}){
        return(
            <View>
                <Text style={styles.receiveUserName}>{item.receiveUserName}</Text>
                <Text style={styles.payOrderTime}>{item.payOrderTime}</Text>
                <Text style={styles.confirmOrderTime}>{item.confirmOrderTime}</Text>
                <Text style={styles.bonusTimeStr}>{item.bonusTimeStr}</Text>
                <Text style={styles.bonusAmount}>{item.bonusAmount}元</Text>
                <View style={styles.line}></View>
            </View>
        )
    }

refreshing是下拉加載更多

<!--設(shè)置pageIndex，加載請(qǐng)求-->
refresh =()=> {
        this.state.pageIndex = 1
        this.setState({
            refreshing: true
        })
        this.fetchBonusListData(`${this.state.pageIndex}`,`PEDDING`)
    }
    

_ListFooterComponent底部顯示

<!--根據(jù)showFoot顯示-->
_flatListFooterComponent(){
        if (this.state.showFoot === 0) {
            return (
                <View style={{ height: 30, alignItems: 'center', justifyContent: 'flex-start', }}>
                    <Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5, }}>
                        沒(méi)有更多數(shù)據(jù)了
                    </Text>
                </View>
            )
        } else if (this.state.showFoot === 1) {
            return (
                <View style={styles.footer}>
                    <Text></Text>
                </View>
            )
        } else if (this.state.showFoot === 2) {
            return (
                <View style={styles.footer}>
                    <ActivityIndicator />
                    <Text>正在加載更多數(shù)據(jù)...</Text>
                </View>
            )
        }
    }

_flatListOnEndReached底部刷新處理

<!--修改showFoot-->
 _flatListOnEndReached (){
        if (this.hasNextPage === 0) {
            this.setState({ showFoot: 0 })
        } else {
            //底部顯示正在加載更多數(shù)據(jù)
            this.setState({ showFoot: 2 })
            //獲取數(shù)據(jù)
            this.state.pageIndex++;
            this.fetchBonusListData(`${this.state.pageIndex}`, `PEDDING`)
        }
    }

屬性設(shè)置

constructor(props) {
        super(props);
        this.state = {
            bonusList: [],       // 數(shù)據(jù)數(shù)組
            pageSize: 20,        // 頁(yè)面大小
            pageIndex: 1,        // 第幾頁(yè)面
            refreshing: false,   // 是否下拉刷新
            showFoot: 1,         // 底部展示
        }
        // 是否有下一頁(yè)： 1:有/0:無(wú)
        this.hasNextPage = 0
    }

網(wǎng)絡(luò)請(qǐng)求

 fetchBonusListData(pageIndex,bonusStatus){
        requestRecommendBonusListFunction(`${bonusStatus}`,`${pageIndex}`,`${this.state.pageSize}`).then(result =>{
            console.log("--請(qǐng)求成功",result)
            this.setState({
                refreshing: false
            })
            if (result.code === '0000'){
                let oldBonusList = this.state.bonusList ? this.state.beBonusList:[]
                let newBonusList = [...result.data.bonusList, ...oldBonusList];
                this.setState({
                    bonusList: newBonusList,
                    showFoot: result.data.hasNextPage,
                })
                this.hasNextPage = result.data.hasNextPage
            }
        }).catch(error => {
            this.setState({
                refreshing: false
            })
        })

    }

簡(jiǎn)單的使用，高級(jí)使用官網(wǎng)都有：
https://reactnative.cn/docs/flatlist#__docusaurus