React-Native中FlatList用法

React-Native的FlatList

1. 支持水平布局模式。
2. 行组件显示或隐藏时可配置回调事件。
3. 支持单独的头部组件。
4. 支持单独的尾部组件。
5. 支持自定义行间分隔线。
6. 支持下拉刷新。
7. 支持上拉加载。
8. 支持跳转到指定行（ScrollToIndex）。
9. 支持多列布局。

render很重要

<!--bonusList是数据源，onEndReachedThreshold防止过度刷新-->
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

<!--内容控件展示-->
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是下拉加载更多

<!--设置pageIndex，加载请求-->
refresh =()=> {
        this.state.pageIndex = 1
        this.setState({
            refreshing: true
        })
        this.fetchBonusListData(`${this.state.pageIndex}`,`PEDDING`)
    }
    

_ListFooterComponent底部显示

<!--根据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, }}>
                        没有更多数据了
                    </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>正在加载更多数据...</Text>
                </View>
            )
        }
    }

_flatListOnEndReached底部刷新处理

<!--修改showFoot-->
 _flatListOnEndReached (){
        if (this.hasNextPage === 0) {
            this.setState({ showFoot: 0 })
        } else {
            //底部显示正在加载更多数据
            this.setState({ showFoot: 2 })
            //获取数据
            this.state.pageIndex++;
            this.fetchBonusListData(`${this.state.pageIndex}`, `PEDDING`)
        }
    }

属性设置

constructor(props) {
        super(props);
        this.state = {
            bonusList: [],       // 数据数组
            pageSize: 20,        // 页面大小
            pageIndex: 1,        // 第几页面
            refreshing: false,   // 是否下拉刷新
            showFoot: 1,         // 底部展示
        }
        // 是否有下一页： 1:有/0:无
        this.hasNextPage = 0
    }

网络请求

 fetchBonusListData(pageIndex,bonusStatus){
        requestRecommendBonusListFunction(`${bonusStatus}`,`${pageIndex}`,`${this.state.pageSize}`).then(result =>{
            console.log("--请求成功",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
            })
        })

    }

简单的使用，高级使用官网都有：
https://reactnative.cn/docs/flatlist#__docusaurus