如何在TabbedHeaderPager中调用goToPage()实现程序化切换标签页？

你遇到的问题根源在于TabbedHeaderPager的goToPage是组件内部的实例方法，并非接收外部传入的回调函数，所以直接通过goToPage或pagerProps传递自定义函数完全无效。正确的做法是通过ref获取组件实例，再调用实例自带的goToPage方法。

具体实现步骤： #

• 创建ref引用TabbedHeaderPager组件
• 将ref绑定到组件上
• 在需要切换标签页的逻辑中，通过ref调用实例方法

修改后的代码示例： #

import { useRef } from 'react'; // 函数组件用useRef，类组件改用createRef

// 组件内部定义ref
const pagerRef = useRef(null);

// 封装标签页切换函数
const switchTab = (targetIndex) => {
  // 确保实例已挂载再调用方法
  if (pagerRef.current) {
    pagerRef.current.goToPage(targetIndex);
  }
};

// 渲染TabbedHeaderPager组件
<TabbedHeaderPager
  ref={pagerRef} // 绑定ref到组件
  pagerProps={{ 
    onScroll,
  }}    
  rememberTabScrollPosition
  onTopReached={() => console.log('onTopReached')}
  snapToEdge={false}
  parallaxHeight={400}
  backgroundColor={t.background.val}
  title={club.name ? club.name : 'My Golf Club'}
  foregroundImage={getClubLogoImage(club)}
  containerStyle={{
    minHeight: 800,
  }}
  backgroundImage={getClubBackgroundImage(club)}
  tabs={tabs}
>
  {tabs.map((tab, index) => tab.content)}
</TabbedHeaderPager> 

之后直接调用switchTab(1)（比如切换到第二个标签页，索引从0开始）就能实现程序化标签页切换了。

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