react-native-pager-view滑动正常，调用setPage无响应问题求助

问题现象 #

使用react-native-pager-view时，滑动手势可正常切换页面，但通过按钮调用setPage()方法无法实现程序化页面切换。已尝试以下方案但均未解决：

• 将子组件替换为示例中的简单视图
• 在useEffect中持续硬设页面值
• 使用单独状态跟踪当前页面

代码片段 #

// 组件外部
const AnimatedPager = Animated.createAnimatedComponent(PagerView)

// 组件内部
const [activeScreenKey, setActiveScreenKey] = useState(0)
const pagerViewRef = useRef<PagerView>(null)

// 用户滑动时同步activeScreenKey
const getActiveKey = (e: PagerViewOnPageScrollEvent) => {
  const position = e?.nativeEvent?.position
  setActiveScreenKey(position)
}

// 调用setPage并更新跟踪状态
const setPage = (screenKey: number) => {
  pagerViewRef.current?.setPage(screenKey)
  setActiveScreenKey(screenKey)
}

<LinearGradient colors={['#3936BD', '#8448DB']} tw="flex-1">
    <AnimatedPager
      ref={pagerViewRef}
      initialPage={0}
      scrollEnabled={false}
      onPageSelected={getActiveKey}
      tw="flex-1"
    >
      <CustomView
        key="1"
        title={'title'}
        subtitle={'subtitle'}
        buttonTitle={'Next  ➡️'}
        onPress={() => setPage(1)}
      />
     <CustomView
        key="2"
        title={'title'}
        subtitle={'subtitle'}
        buttonTitle={'Next  ➡️'}
        onPress={() => setPage(2)}
      />

    </AnimatedPager>
  </LinearGradient>

解决方案 #

1. 修复Animated封装的ref传递问题 #

react-native-pagerView的动画封装可能导致ref无法正确传递到原生实例，可尝试：

• 先直接使用原生PagerView测试，确认setPage是否生效：

  <PagerView
    ref={pagerViewRef}
    initialPage={0}
    scrollEnabled={false}
    onPageSelected={getActiveKey}
    tw="flex-1"
  >
    {/* 子组件保持不变 */}
  </PagerView>
  

• 若原生组件正常，手动转发ref给动画封装组件：

  const AnimatedPager = Animated.createAnimatedComponent(PagerView)
  const AnimatedPagerWithRef = React.forwardRef((props, ref) => (
    <AnimatedPager {...props} ref={ref} />
  ))
  // 组件内使用AnimatedPagerWithRef
  <AnimatedPagerWithRef ref={pagerViewRef} {...其他属性} />
  

2. 调整状态更新与setPage的执行顺序 #

当前代码先调用原生方法再更新状态，可能引发组件重绘干扰，调整顺序并添加微任务延迟：

const setPage = (screenKey: number) => {
  setActiveScreenKey(screenKey)
  setTimeout(() => {
    pagerViewRef.current?.setPage(screenKey)
  }, 0)
}

3. 动态控制scrollEnabled属性 #

scrollEnabled={false}可能阻止程序化页面切换，临时启用滚动再禁用：

const [scrollEnabled, setScrollEnabled] = useState(false)
const setPage = (screenKey: number) => {
  setScrollEnabled(true)
  pagerViewRef.current?.setPage(screenKey)
  setTimeout(() => setScrollEnabled(false), 300)
}
// 组件中绑定scrollEnabled状态
<AnimatedPager scrollEnabled={scrollEnabled} {...其他属性} />

4. 验证ref绑定有效性 #

组件挂载后打印ref，确认是否获取到PagerView实例：

useEffect(() => {
  console.log('PagerView Ref:', pagerViewRef.current)
  // 若ref为null，检查组件是否被条件渲染隐藏或未正确挂载
}, [])

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