React Native返回首页时如何选中顶部导航栏首个Tab

问题核心是React Navigation默认会保留导航器的状态，导致切走再切回时顶部Tab停留在之前选中的页面。以下是两种直接可行的解决方法：

方法一：在顶部Tab组件中监听焦点事件重置路由 #

修改TopTabroup组件，利用useFocusEffect监听页面焦点，每次获得焦点时重置顶部Tab到初始路由：

// 先导入所需依赖
import React from 'react';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { CommonActions } from '@react-navigation/native';

function TopTabroup(props){
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      // 当页面获得焦点时，重置顶部Tab到第一个页面
      navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: 'Berita Terkini' }],
        })
      );
    }, [navigation])
  );

  return (
    <TopTabsGroup.Navigator initialRouteName="Berita Terkini" >
      <TopTabsGroup.Screen name='Berita Terkini' component={BeritaTerkini} />
      <TopTabsGroup.Screen name='Terpopuler' component={Terpopuler}/>
      <TopTabsGroup.Screen name='Rekomendasi' component={Rekomendasi}/>
    </TopTabsGroup.Navigator>
  )
}

方法二：在底部Tab页面中添加焦点监听 #

在TabGroup的Berita Terkini屏幕配置中添加listeners，监听焦点事件后重置顶部Tab路由：

// 先导入CommonActions
import { CommonActions } from '@react-navigation/native';

function TabGroup (){
  return(
    <Tab.Navigator screenOptions={{
      headerShown: false,
      tabBarActiveTintColor :'red',
      tabBarInactiveTintColor :'black',
    }} >
      <Tab.Screen 
        name='Berita Terkini' 
        component={TopTabroup}
        options={{
          tabBarLabel: 'BERITA TERKINI',
          tabBarIcon: ({ color, size }) => (
            // 这里填充你的图标组件
          ),
        }}
        listeners={({ navigation }) => ({
          focus: () => {
            // 获取顶部Tab导航器实例并重置路由
            const topTabNavigator = navigation.getParent();
            if (topTabNavigator) {
              topTabNavigator.dispatch(
                CommonActions.reset({
                  index: 0,
                  routes: [{ name: 'Berita Terkini' }],
                })
              );
            }
          },
        })}
      />
      {/* 其他底部Tab屏幕代码保持不变 */}
      <Tab.Screen name='Topik' component={Topik}
        options={{
          tabBarLabel: 'TOPIK',
          tabBarIcon: ({ color, size }) => (

          ),
        }}/>
      <Tab.Screen name='Indonesiaku' component={Foto}
        options={{
          tabBarLabel: 'FOTO',
          tabBarIcon: ({ color, size }) => (

          ),
        }}/>
      <Tab.Screen name='Menu' component={BeritaIndonesia}
        options={{
          tabBarLabel: 'MENU',
          tabBarIcon: ({ color, size }) => (

          ),
        }}/>
    </Tab.Navigator>
  )
}

说明 #

• 两种方法都是通过监听焦点事件触发路由重置，确保每次返回底部Tab的首页时，顶部Tab自动回到第一个页面
• CommonActions.reset会完全重置导航器状态，替代原有路由栈，避免残留之前的选中状态
• 确保导入@react-navigation/native中的相关工具类和钩子，且路由名称与定义完全一致

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