React Navigation v4升级v6：Tab点击触发函数仅执行一次问题

问题根源 #

1. tabPress判断逻辑偏差：v6中tabPress事件触发时，屏幕还未完成切换，从其他Tab切回时navigation.isFocused()为false，导致函数不执行；而v4是先执行默认切换逻辑再判断聚焦状态，所以能正常触发。
2. 组件挂载机制差异：v6 BottomTabNavigator默认保持所有屏幕挂载，componentDidMount仅执行一次，但这不是函数失效的核心原因——scrollToTop函数已经通过setParams存入路由参数，只是触发时机不对。
3. Header隐藏实现方式变更：v4的全局Header隐藏逻辑，v6有更直接的配置方式。

解决方案 #

1. 调整Tab监听逻辑，覆盖所有点击场景 #

修改ScreenB的listeners，同时监听tabPress和focus事件，确保无论从外部切回还是点击当前Tab，都能触发自定义函数：

const Tab = createBottomTabNavigator();
<Tab.Navigator
  // 全局隐藏所有Tab页面的Header，替代v4的navigationOptions逻辑
  screenOptions={{ headerShown: false }}
>
  <Tab.Screen
    name="ScreenA"
    component={ComponentA}
  />
  <Tab.Screen
    name="ScreenB"
    component={ComponentB}
    listeners={({ navigation, route }) => ({
      tabPress: (e) => {
        // 已经在当前Tab页面时，点击Tab直接触发函数
        if (navigation.isFocused() && route.params?.scrollToTop) {
          route.params.scrollToTop();
        }
      },
      focus: () => {
        // 从其他Tab切回ScreenB时，页面聚焦触发函数
        if (route.params?.scrollToTop) {
          route.params.scrollToTop();
        }
      },
    })}
  />
</Tab.Navigator>

2. 保留ComponentB原有代码（无需修改） #

类组件的componentDidMount仅执行一次，但setParams存入的scrollToTop会一直保存在路由参数中，无需额外调整：

...
componentDidMount(){
  this.props.navigation.setParams({
      scrollToTop: this.scrollToTop,
  });
}
scrollToTop = () => {
  console.log("Press");
  this.setState(() => ({...}));
}
...

关键说明 #

• screenOptions={{ headerShown: false }}：直接在Tab.Navigator中配置，即可全局隐藏所有Tab页面的Header，完全替代v4中Tabs.navigationOptions的逻辑。
• 同时监听tabPress和focus：覆盖了两种核心场景——当前页面点击Tab、从其他页面切回当前Tab，完美复刻v4的触发效果。

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