如何延迟加载具有特定数量的项目在scrollview中反应原生？

Question

我正在尝试开发一个应用程序，其中一个屏幕包含来自某个api的新闻源加载数据，该api加载了大约100个数据。我想像第一次加载10个数据一样分页，然后滚动更多以获取更多数据，依此类推。它也被称为无限滚动。

Answer 1

你应该使用FlatList

<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>

onEndReached：当滚动位置进入渲染内容的onEndReachedThreshold时调用一次。

和onEndReachedThreshold：距离结尾多远（以列表的可见长度为单位），列表的下边缘必须来自内容的末尾才能触发onEndReached回调。因此，当内容的结尾在列表的可见长度的一半之内时，值0.5将触发onEndReached。

Answer 2

您应该在scrollview或flatlist中使用以下示例进行分页。将您的网址（API）粘贴到此处并运行。

 import React, { Component } from "react";
        import {
          View,
          Text,
          TouchableOpacity,
          StyleSheet,
          FlatList,
          Platform,
          ActivityIndicator
        } from "react-native";

        class FlatlistPagination extends Component {
          constructor() {
            super();
            this.state = {
              loading: true,
              //Loading state used while loading the data for the first time
              serverData: [],
              //Data Source for the FlatList
              fetching_from_server: false
              //Loading state used while loading more data
            };
            this.offset = 1;
            //Index of the offset to load from web API
          }
          componentDidMount() {
            fetch("http://aboutreact.com/demo/getpost.php?offset=" + this.offset)
              //Sending the currect offset with get request
              .then(response => response.json())
              .then(responseJson => {
                //Successful response from the API Call
                this.offset = this.offset + 1;
                //After the response increasing the offset for the next API call.
                this.setState({
                  serverData: [...this.state.serverData, ...responseJson.results],
                  //adding the new data with old one available in Data Source of the List
                  loading: false
                  //updating the loading state to false
                });
              })
              .catch(error => {
                console.error(error);
              });
          }
          loadMoreData = () => {
            //On click of Load More button We will call the web API again
            this.setState({ fetching_from_server: true }, () => {
              fetch("http://aboutreact.com/demo/getpost.php?offset=" + this.offset)
                //Sending the currect offset with get request
                .then(response => response.json())
                .then(responseJson => {
                  //Successful response from the API Call
                  this.offset = this.offset + 1;
                  //After the response increasing the offset for the next API call.
                  this.setState({
                    serverData: [...this.state.serverData, ...responseJson.results],
                    //adding the new data with old one available in Data Source of the List
                    fetching_from_server: false
                    //updating the loading state to false
                  });
                })
                .catch(error => {
                  console.error(error);
                });
            });
          };

          renderFooter() {
            return (
              //Footer View with Load More button
              <View style={styles.footer}>
                <TouchableOpacity
                  activeOpacity={0.9}
                  onPress={this.loadMoreData}
                  //On Click of button calling loadMoreData function to load more data
                  style={styles.loadMoreBtn}
                >
                  <Text style={styles.btnText}>Load More</Text>
                  {this.state.fetching_from_server ? (
                    <ActivityIndicator color="white" style={{ marginLeft: 8 }} />
                  ) : null}
                </TouchableOpacity>
              </View>
            );
          }

          render() {
            return (
              <View style={styles.container}>
                {this.state.loading ? (
                  <ActivityIndicator size="large" />
                ) : (
                  <FlatList
                    style={{ width: "100%" }}
                    keyExtractor={(item, index) => index}
                    data={this.state.serverData}
                    renderItem={({ item, index }) => (
                      <View style={styles.item}>
                        <Text style={styles.text}>
                          {item.id}
                          {"."}
                          {item.title.toUpperCase()}
                        </Text>
                      </View>
                    )}
                    ItemSeparatorComponent={() => <View style={styles.separator} />}
                    ListFooterComponent={this.renderFooter.bind(this)}
                    //Adding Load More button as footer component
                  />
                )}
              </View>
            );
          }
        }

        const styles = StyleSheet.create({
          container: {
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            paddingTop: 30
          },
          item: {
            padding: 10
          },
          separator: {
            height: 0.5,
            backgroundColor: "rgba(0,0,0,0.4)"
          },
          text: {
            fontSize: 15,
            color: "black"
          },
          footer: {
            padding: 10,
            justifyContent: "center",
            alignItems: "center",
            flexDirection: "row"
          },
          loadMoreBtn: {
            padding: 10,
            backgroundColor: "#800000",
            borderRadius: 4,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center"
          },
          btnText: {
            color: "white",
            fontSize: 15,
            textAlign: "center"
          }
        });

        export default FlatlistPagination;