React-native-pager-view setPage() 函数在 iOS 上不能 100% 工作

Question

我有一个底部页面，其中包含一个 PagerView，其中有 4 个页面。我在页面底部有“下一页”和“上一页”按钮，可调用 goToNextPage 和 goToPreviousPage 函数。由于某些原因，在 iOS 上，这只能在某些时候起作用。其他时候，它会挂在其中一页上。我添加了控制台日志，并且始终打印正确的屏幕索引。似乎只是没有正确设置页面。我似乎不需要做任何不同的事情来重现这个，它只是随机发生的。 （反应本机寻呼机视图：“6.2.3”）

以下是换页功能：

    const pagerRef = useRef(null);
    const [ currentPage, setCurrentPage ] = useState(0)

      const goToNextPage = () => {
    //console.log("Pager ref: ", pagerRef.current)
      const currentPageIndex = currentPage;
      const nextPageIndex = currentPageIndex + 1
      if (currentPageIndex < 3) {  
        console.log("Current page index: ", currentPageIndex)
        console.log("Going to page index: ", nextPageIndex)
        setCurrentPage(nextPageIndex);
        
      }
      pagerRef.current?.setPage(nextPageIndex);
    
    
      };
      
      const goToPreviousPage = () => {
      const currentPageIndex = currentPage;
      const previousPageIndex = currentPageIndex - 1;
      if (currentPageIndex > 0) {
        console.log("Current page index: ", currentPageIndex)
        console.log("Going to page index: ", previousPageIndex)
        setCurrentPage(previousPageIndex);
      }
      pagerRef.current?.setPage(previousPageIndex);
      };

这是寻呼机视图本身。当页面卡住时，scrollEnabled 也会停止运行。我尝试将其设置为 false 但这没有帮助。

         <PagerView
            style={styles.pager}
            ref={pagerRef}             
            initialPage={0}             
            scrollEnabled={true}
          >             
            <View key="1">                 
                <Text>Page 1</Text>             
            </View>             
            <View key="2">                 
                <Text>Page 2</Text>             
            </View>             
            <View key="3">                 
                <Text>Page 3</Text>             
            </View>             
            <View key="4">                 
                <Text>Page 4</Text>             
            </View>           
            </PagerView>

我还尝试使用简单的 useEffect 更新 pagerRef，这只会使页面更改速度变慢，而问题仍然存在：

    useEffect(() => {pagerRef.current?.setPage(currentPage)}, [currentPage])

谢谢！

--更新。不确定这是否有帮助。但滚动本身并不是停止工作的。我的页面有几个组件，它们也变得没有响应。看起来整个 PagerView 组件变得没有响应。当我删除这些自定义组件并使用视图组件（如上所示）时，仍然出现此问题。

Answer 1

我在我的项目中遇到了同样的问题（setPage 无法 100% 工作且 onPageSelected 不再工作）。

你可以尝试做:

requestAnimationFrame(() => refPagerView.current?.setPage(index));

这是 pager-view-react-native 的一个已知问题。

https://github.com/callstack/react-native-pager-view#known-issues