在react-native-pager-view（或任何其他）内动态更改内容

我正在开发一个项目，我将在寻呼机视图中逐页显示某本书的详细信息和信息作为页面组件，该书包含 500 多个页面，所以我不能只创建 500 个页面组件，例如并将它们插入到寻呼机中。我想的是我可以获得一个特定的页面，仅在上一页和下一页旁边呈现其组件。当用户滑动到下一页/上一页时，我会更改组件状态，并使用新的 3 个页面（当前页面、上一页和下一页）重新渲染。我脑子里的逻辑很合理，但当我尝试应用它时，它就行不通了。

谁能帮助我，引导我观看某些更能解释这一原理的视频？我觉得我错过了一些东西。

代码如下：

首先我有 PagesContainer，在这里我将根据当前页面创建 PagesDetails 组件，并将这些页面放在 React-native-pager-view 中（你可以建议我一个更好的选择）。仅出于测试目的，我设置滑动结束回调（onPageSelected）以增加当前页码状态，然后这将导致组件重新渲染并创建新的页面组件，只有当用户滑动到当然新页面：

function PagesContainer({ currentPageNumber, setCurrentPageNumber }) {
    const [pageComponents, setPageComponents] = useState([]);
    useEffect(() => {
        let compArr = [];
        compArr.push(<PageDetails key="current" pageNumber={currentPageNumber} />);
        if (currentPageNumber > 1) {
            compArr.unshift(<PageDetails key="previous" pageNumber={currentPageNumber - 1} />)
        }
        if (currentPageNumber <= 500) {
            compArr.push(<PageDetails key="next" pageNumber={currentPageNumber + 1} />)
        }
        setPageComponents(compArr);
    }, [currentPageNumber])

    return (<PagerView style={{ flex: 1 }} 
    initialPage={currentPageNumber == 1 ? 0 : 1}
    layoutDirection={"rtl"}
    onPageSelected={(PageSelectedEvent)=>{setCurrentPageNumber(currentPageNumber + 1)}}
    >
        {pageComponents.map(page => {
            return page;
        })}
    </PagerView>)
}

然后在这里我有我的 PageDeatails 组件，我在其中简单地显示页面的文本和详细信息，我从在代码文件最顶部导入的 bookData 对象中获取数据：

function PageDetails({ pageNumber }) {
    const [pageContent, setPageContent] = useState(null);
    useEffect(() => {
        setPageContent(bookData[pageNumber]["pageContent"]);
    }, []);
        return (
        <View>
            {pageContent && <View>
                {pageContent.map(item => {
                    return (<Text>item</Text>)
                })}
            </View>
            }
        </View>
    )
}

这个逻辑在我的脑海中是完全合理的，但当我测试它时它不起作用......我错过了什么？我究竟做错了什么？

使用 PagerView 参考useRef还存储页面索引并传递给初始页获取当前页面索引已选择页面打回来

like:

initialPage={currentPageIndex}