react-native-pager-view的setPage方法在iOS设备不生效问题求助

该问题是react-native-pager-view iOS端的实现特性导致的，和你写的逻辑本身没有语法错误：

• iOS端底层基于UIPageViewController封装，组件未完全完成布局挂载流程时，调用setPage方法会被静默丢弃，Android端基于ViewPager2实现无此限制
• 部分版本的组件iOS端setPage方法存在时序兼容缺陷，无动画切换方法setPageWithoutAnimation的兼容性表现更好
• iOS端对超出子页面数量范围的非法index会直接忽略调用，Android端会自动兜底到最近的合法边界值

方案1：时序兼容修复（推荐，保留切换动画） #

给setPage调用加0延迟调度，确保调用时PagerView已经完成挂载布局：

useEffect(() => {
  const timer = setTimeout(() => {
    viewPagerRef.current?.setPage(index);
  }, 0);
  return () => clearTimeout(timer);
}, [index]);

方案2：分平台适配（不需要切换动画时推荐） #

iOS端优先使用兼容性更好的无动画切换方法：

import { Platform } from 'react-native';

// ... 其余代码不变
useEffect(() => {
  if (Platform.OS === 'ios') {
    viewPagerRef.current?.setPageWithoutAnimation(index);
  } else {
    viewPagerRef.current?.setPage(index);
  }
}, [index]);

方案3：增加挂载状态校验（极端场景兼容） #

如果组件挂载逻辑比较复杂，可增加挂载状态标记，仅在PagerView完成布局后执行切换逻辑：

import React, { useEffect, useRef, useState } from 'react';

// ... 其余代码不变
const MyViewPager = ({ children, index, onIndexChange }: Props) => {
    const viewPagerRef = useRef<PagerView>(null);
    const [isPagerMounted, setIsPagerMounted] = useState(false);

    useEffect(() => {
        if (!isPagerMounted) return;
        const timer = setTimeout(() => {
          viewPagerRef.current?.setPage(index);
        }, 0);
        return () => clearTimeout(timer);
    }, [index, isPagerMounted]);

    const onPageSelect = (e: PagerViewOnPageSelectedEvent) => {
        onIndexChange(e.nativeEvent.position);
    };

    return (
        <View style={styles.container}>
            <PagerView
                ref={viewPagerRef}
                style={styles.container}
                initialPage={index}
                orientation="horizontal"
                onPageSelected={onPageSelect}
                onLayout={() => setIsPagerMounted(true)}
            >
                {children}
            </PagerView>
        </View>
    );
};

以上三种方案任选其一即可解决iOS端切换无响应的问题。

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