如何使用 Flatlist onEndReached 在 React Native 中进行分页答案

【问题标题】：How to make Paging in React Native using Flatlist onEndReached如何使用 Flatlist onEndReached 在 React Native 中进行分页
【发布时间】：2019-09-20 07:33:17
【问题描述】：

当我有这样的 axios 文件时：

  axios({
    method: 'post',
    url: ARTICLES_URL,
    headers: {
      Authorization: `Bearer ${token}`,
    },
    data: {
      header: {
        page: pages,
        size: 10,
        sort: 'DESC',
      },
      body: {},
    },
  }).then((response) => {
    if (response.data.header.response_code === '99') {
      dispatch(articleFetchSuccess(response.data));
      while(articleFetchSuccess(Response.data)) {
      }
    } else {
      dispatch(articleFetchFailed(response.data));
    }
  });
};

我有一个这样的组件文件：

<div>
<FlatList
            ListHeaderComponent={(
              <View style={common.flatlistHeaderContainer}>
                <Icon name="info-outline" size={24} color={color.colorMute} />
                <Text>{` ${articleData.length} Articles Found`}</Text>
              </View>
)}
            contentContainerStyle={{ paddingHorizontal: 19 }}
            data={articleData}
            renderItem={this.articleCardItem}
            keyExtractor={this.articleCardItemKey}
            onEndReached={this.handlePages}
            onEndReachedThreshold={0}
          />
</div>
)
}

}

当 axios 和组件位于不同文件中时，如何根据平面列表中的 onEndReached 使 axios 中的页面动态化？我刚刚发现 axios 和组件在一个文件中，但在我的情况下，我有 axios 文件和组件文件

这是我的 API 响应

{
    "header": {
        "response_code": "99",
        "response_description": "Success"
    },
    "body": [
        {
            "id": "63026",
            "kd_art_size": "YK800100160",
            "kd_article": "YK-8001-16",
            "sku_id": "22209",
            "size": "-",
            "nama": "STELAN",
            "unit": "PCS",
            "price": "259900",
            "jenis": "-",
            "discount": "0",
            "company_code": "ESM ",
            "user_id": "Wina09",
            "date_input": "2017-02-17 16:57:54",
            "user_update": "",
            "date_update": null,
            "link_gambar": null,
            "price_putus": null,
            "hpp": "0"
        },etc

我已经尝试了所有关于分页的课程，但我不明白如何在我的情况下实施。

我希望我能解决这个问题。

【问题讨论】：

pages 是如何定义的？它是一个对象数组吗？ pages 的每个项目都是一个页面，最终到达您加载第二个 pages 项目？
此 API 响应：pastebin.com/MvJpVvSa
不是加载 pasteBin 链接，您可以将您的代码放在代码块中的问题中吗？如果我必须每 2 秒更改一次页面，则很难理解代码
现在，EndReached 应该发生什么？你需要做另一个axios调用吗？或者您是否拥有显示所需的所有数据？你body里面的数组响应1页需要显示吗？
目前，我只使用了一些来自 API 的数据。但是当我不使用分页时，在我的应用程序中加载所有数据并使应用程序需要更多时间来加载数据。我只需要为加载数据设置分页

标签： javascript android react-native

【解决方案1】：

为什么在 react-native 中使用 div？事实上你也在使用View 吗？请让我理解你的代码。

【讨论】：

我的意思是在 div 标签上查看标签

【解决方案2】：

*你可以试试这个*

<Content contentContainerStyle={{ flex: 1 }}>

【讨论】：

我可以在哪里实现它？
你需要为此添加一些解释
你想做什么？