javascript - Spinner 不在 onEndReachedThreshold 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"
/>
}
/>
所以我想在内容末尾拉起时显示微调器,这是我的 _handleLoadMore 函数:
_handleLoadMore = () => {
return(
<Spinner/>
)
}
我尝试在内容末尾拉起,但微调器没有出现,这是什么问题?我正在使用安卓设备
谢谢
解决方案
您需要使用另一个名为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,页脚应该会消失。
推荐阅读
- scala - Different configuration files for unit tests and integration tests
- swiftui - 为什么我的函数在使用 @State 时没有更新文本?
- javascript - Three.js 会自动剔除在其他对象后面不可见的对象吗?
- discord - 狙击命令没有提到用户
- javascript - 使用node.js fs.appendFile附加JSON对象时如何添加逗号分隔符?
- api - 使用超测响应错误404的nestjs e2e测试graphql
- recursion - F#递归函数编译后的无意义复制
- wordpress - 如何为以“@domain.com”结尾的电子邮件地址创建限制注册
- authentication - 将公钥 .cer 文件转换为原始文本
- julia - 在 Julia 中优化代理径向基函数