这是我的固定列表代码:
<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/>
)
}
我尝试在内容的结尾处拉起,但微调框未出现,这是什么问题?我正在使用android设备
谢谢
答案 0 :(得分: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,页脚应消失。