在 React Native 中使用 Flatlist 进行分页（下一个/上一个）

【问题标题】：Pagination using Flatlist in React Native (Next/Previous)在 React Native 中使用 Flatlist 进行分页（下一个/上一个）
【发布时间】：2022-01-06 20:46:00
【问题描述】：

最近，我开始学习 React Native，并为我的项目添加了一个分页。我正在尝试创建一个仅显示数据的前十项的平面列表。然后，当您单击下一个箭头时，它将显示下一个不同的十个项目而不是前十个，依此类推。与后退箭头的逻辑相同，但只有前十项。这是我的代码。它有效，但有一些问题。第一次点击后十项后，显示相同的十项，但再次单击时，显示不同的十项。后退箭头似乎根本无法正常工作。有人可以帮我调整我的代码来解决这些问题吗？我将不胜感激。谢谢！

https://snack.expo.dev/rWq_FLP8o

【问题讨论】：

标签： react-native pagination toggle use-state flatlist

【解决方案1】：

您应该做的是在您的useEffect 中添加pageCurrent 作为依赖项。所以每次pageCurrent 改变useEffect 运行。

  useEffect(() => {
    (async () => {
      const apiURL = `https://jsonplaceholder.typicode.com/albums?_limit=10&_page=${pageCurrent}`;
      fetch(apiURL)
        .then((res) => res.json())
        .then((resJson) => {
          setData(resJson);
        });
    })();
  }, [pageCurrent]); // <-- Makes pageCurrent a dependency

接下来，当您返回第 1 页时，它会停留在第 1 页。这样您就不会得到负页或零页。

const handlePreviousPage = () => {
        console.log("previous page clicked", pageCurrent)
        // Do this so your page can't go negative
        setpageCurrent(pageCurrent - 1<1?1:pageCurrent - 1)
}

这是一个完整的例子 (https://snack.expo.dev/@heytony01/keyboard-function-component-example)

【讨论】：

非常感谢！它有效:))))