iOS端react-native-pager-view的setPage()函数偶发失效求助

问题场景 #

底部页面包含一个4页的PagerView，通过底部的「Next」「Previous」按钮调用goToNextPage/goToPreviousPage切换页面。在iOS平台上偶尔出现功能失效：页面卡在某一页，日志打印的页面索引正确，但PagerView组件完全无响应（即使替换页面内容为基础View组件，问题仍存在）。尝试用useEffect监听currentPage调用setPage，仅减慢了切换速度，问题未解决。

相关代码 #

状态与Ref定义 #

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);
};

PagerView组件 #

<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代码 #

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

解决方案 #

1. 修复按钮逻辑的边界判断 #

当前代码存在**越界调用setPage**的问题：比如currentPage为3时，nextPageIndex是4，此时虽不会更新state，但仍会调用pagerRef.current?.setPage(4)，导致PagerView内部状态混乱。修改后确保仅在合法索引范围内执行切换：

const goToNextPage = () => {
  const nextPageIndex = currentPage + 1;
  if (nextPageIndex <= 3) { // 限制最大索引为3（对应第4页）
    console.log("Current page index: ", currentPage);
    console.log("Going to page index: ", nextPageIndex);
    setCurrentPage(nextPageIndex);
    pagerRef.current?.setPage(nextPageIndex);
  }
};

const goToPreviousPage = () => {
  const previousPageIndex = currentPage - 1;
  if (previousPageIndex >= 0) { // 限制最小索引为0
    console.log("Current page index: ", currentPage);
    console.log("Going to page index: ", previousPageIndex);
    setCurrentPage(previousPageIndex);
    pagerRef.current?.setPage(previousPageIndex);
  }
};

2. 绑定onPageSelected同步状态 #

仅通过按钮更新state会导致state与PagerView内部状态不一致（比如用户手动滑动页面时），添加onPageSelected事件实时同步：

<PagerView
    style={styles.pager}
    ref={pagerRef}             
    initialPage={0}             
    scrollEnabled={true}
    onPageSelected={(e) => setCurrentPage(e.nativeEvent.position)} // 新增同步逻辑
>             
    {/* 页面内容保持不变 */}
    <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>

3. 移除冗余的useEffect #

之前的useEffect会在state更新时重复调用setPage，加剧PagerView的状态混乱，直接移除该代码即可。

4. 升级组件版本 #

react-native-pager-view v6.2.3存在iOS平台已知的稳定性问题，建议升级至最新稳定版（如v6.3.0及以上），官方后续版本修复了部分页面切换无响应的bug。

验证步骤 #

1. 优先修复按钮逻辑的边界判断，确保无越界调用
2. 添加onPageSelected同步state，保证状态与PagerView内部一致
3. 移除冗余的useEffect
4. 测试按钮切换与手动滑动功能，观察是否仍出现无响应情况
5. 若问题依旧，尝试升级react-native-pager-view版本

内容的提问来源于stack exchange，提问作者Jaem