如何从react-native-pages父组件获取当前页面索引？

react-native-pages的onScrollEnd回调本身会传递当前页面的索引值作为参数，你只需要在回调中接收这个参数就能直接拿到滚动后的页面索引，进而完成状态变更。

修改你的代码如下：

function PagesContainer() {
  // 用useState管理当前页码状态
  const [currentPageNumber, setCurrentPageNumber] = useState(1);

  return (
    <Pages
      startPage={currentPageNumber - 1} // 注意：组件内部索引从0开始，需转换为0-based值
      onScrollEnd={(index) => {
        // index就是滚动结束后的当前页面索引（从0开始计数）
        console.log("当前页面索引：", index);
        // 转换为你需要的1-based页码并更新状态
        setCurrentPageNumber(index + 1);
      }}
    >
      <Texts pageNumber={1} />
      <Texts pageNumber={2} />
      <Texts pageNumber={3} />
    </Pages>
  );
}

关键说明：

• react-native-pages的页面索引采用0-based计数，如果你的业务逻辑是1-based页码，需要做index + 1的转换
• startPage属性需要传入0-based的索引值，因此要把currentPageNumber转换为currentPageNumber - 1

内容的提问来源于stack exchange，提问作者M.KH