Spinner 不在 onEndReachedThreshold Flatlist 中工作答案

【问题标题】：Spinner isn't working in onEndReachedThreshold FlatlistSpinner 不在 onEndReachedThreshold Flatlist 中工作
【发布时间】：2019-01-30 12:46:48
【问题描述】：

这是我的平面列表代码：

<FlatList style={styles.scrollView} onScroll={(event) => this.handleOnScroll(event) } scrollEventThrottle={16} ref='scrollUp'
    data={this.state.data}
    keyExtractor={this._keyExtractor}
    renderItem={({item}) =>(
        <ScrollView style={styles.scrollView} contentContainerStyle={styles.contentContainer} onScroll={(event) => this.handleOnScroll(event) } scrollEventThrottle={16} ref='scrollUp'>
            {this._getHomeComponent(item)}
        </ScrollView>
    )}
    onEndReached={this._handleLoadMore}
    onEndReachedThreshold={0.5}
    refreshControl={
        <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
            title=""
            tintColor="#86bc40"
            titleColor="#86bc40"
        />
    }
/>

所以我想在内容末尾拉起时显示微调器，这是我的 _handleLoadMore 函数：

_handleLoadMore = () => {
    return(
        <Spinner/>
    )
}

我尝试在内容末尾拉起，但没有出现微调器，这是什么问题？我正在使用安卓设备

谢谢

【问题讨论】：

标签： javascript android react-native infinite-scroll react-native-flatlist

【解决方案1】：

您需要使用另一个名为 ListFooterComponent 的 Flatlist 属性：

<FlatList style={styles.scrollView} onScroll={(event) => this.handleOnScroll(event) } scrollEventThrottle={16} ref='scrollUp'
data={this.state.data}
keyExtractor={this._keyExtractor}
renderItem={({item}) =>(
    <ScrollView style={styles.scrollView} contentContainerStyle={styles.contentContainer} onScroll={(event) => this.handleOnScroll(event) } scrollEventThrottle={16} ref='scrollUp'>
        {this._getHomeComponent(item)}
    </ScrollView>
)}
onEndReached={this._handleLoadMore}
onEndReachedThreshold={0.5}
refreshControl={
    <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this._onRefresh}
        title=""
        tintColor="#86bc40"
        titleColor="#86bc40"
    />
}
ListFooterComponent={this.renderFooter}
/>

你的 renderFooter 可能看起来像这样：

renderFooter = () => {
    if (!this.state.showSpinner) return null

    return (
      <Spinner/>
    )
}

onEndReached 应该用于将更多数据加载到您的 this.state.data 并将 this.state.showSpinner 设置为 true。加载更多数据后，将 showSpinner 设置为 false，页脚应该会消失。

【讨论】：