Question

我的FlatList加载数据还可以，并且工作正常，
但是在渲染时，无需手动滚动即可多次获取数据！

这是我的FlatList：

<FlatList
keyExtractor={(item, index) => 'key' + index}
contentContainerStyle={{ flex: 1, alignItems: 'center', width: Dimensions.get('screen').width }}
data={this.state.images}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
ListFooterComponent={
this.state.isLoadingMore ? (
<ActivityIndicator color={"darkgray"} style={{ margin: 8 }} />
) : (
null
)
}
onMomentumScrollBegin={() => this._onMomentumScrollBegin}

renderItem={({ item, index }) =>
<MyImages itemArray={item} nav={this.props.navigation} />
}
/>

更多功能：

handleLoadMore = () => {
console.log("called handleLoadMore")
if (!this.state.onEndReachedCalledDuringMomentum) {
    this.setState({ onEndReachedCalledDuringMomentum: true })
    this.getData(this.state.id)
}
}

onMomentum函数：

_onMomentumScrollBegin = () => this.setState({ onEndReachedCalledDuringMomentum: false });

和getData函数：

async getData(id = 0) {

console.log('id:', id)
if (id) {
    this.setState({
    isLoadingMore: true,
    })
}


let response = await api.getData(id);

if (response.result == 'success') {
    this.setState({
    onEndReachedCalledDuringMomentum : false,
    })
    data = response.data
} else {
    alert(response.result)
}


this.setState({
    images: !id ? data : [...this.state.images, ...data],
    isLoading: false,
    isLoadingMore: false,
    id: id,
})

}

哪里有问题？
我想加载更多滚动到结尾

Answer 1

handleLoadMore是一种执行loadmore功能的方法

 <FlatList
              data={this.state.data}
              extraData={this.state}
              refreshControl={
                <RefreshControl
                  refreshing={this.state.isRefreshing}
                  onRefresh={this.onRefresh.bind(this)}
                />
              }
              renderItem={({ item }) => (
                <View style={{
                  flexDirection: 'row',
                  padding: 15,
                  alignItems: 'center'
                }}>
                <Image source={{ uri: item.profile_image }} 
                    style={{
                    height: 50,
                    width: 50,
                    marginRight: 10
                  }} />
                  <Text style={{
                    fontSize: 18,
                    alignItems: 'center',
                    color: '#65A7C5',
                  }}>{item.display_name}</Text>
                </View>
              )}
              keyExtractor={(item, index) => index.toString()}
              ItemSeparatorComponent={this.renderSeparator}
              ListFooterComponent={this.renderFooter.bind(this)}
              onEndReachedThreshold={0.4}
              onEndReached={this.handleLoadMore.bind(this)}
            />




  handleLoadMore = () => {
     this.setState({
                   data: [...this.state.data, ...response.data] // assuming response.data is an array and holds new records
               });
  };

如何在FlatList上创建更多负载？

1 个答案: