React Navigation实现TopTabs切换时动态更新标签标题

核心思路 #

通过useState管理当前显示的标签组，监听Tab切换事件，选中指定标签（如“Товары”）时切换到子标签组，其他场景恢复初始标签组。

修改步骤 #

1. 更新NavigationTopTabs.tsx #

这是实现动态切换的核心文件，引入状态管理和切换逻辑：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useState } from 'react';
import { GoodsScreen, ServicesScreen, PositionsScreen, HomeScreen, SearchScreen } from '../../screens/authorized';

const TopTabs = createMaterialTopTabNavigator();

// 初始主标签组
const originalTabs = [
  { name: 'Услуги', component: ServicesScreen },
  { name: 'Товары', component: () => null },
  { name: 'Позиции', component: PositionsScreen },
  { name: 'Недвижимость', component: HomeScreen },
  { name: 'Транспорт', component: SearchScreen },
];

// Товары对应的子标签组
const goodsTabs = [
  { name: 'Автомобильные', component: ServicesScreen },
  { name: 'Мобильные', component: ServicesScreen },
  { name: 'Appliances', component: ServicesScreen },
];

const NavigationTopTabs = function () {
  const [currentTabs, setCurrentTabs] = useState(originalTabs);
  const [inGoodsSubTab, setInGoodsSubTab] = useState(false);

  return (
    <TopTabs.Navigator
      screenOptions={{
        tabBarLabelStyle: {
          textTransform: 'capitalize',
          fontWeight: 'bold',
        },
        tabBarScrollEnabled: true,
      }}
      onTabPress={({ route }) => {
        if (!inGoodsSubTab && route.name === 'Товары') {
          setCurrentTabs(goodsTabs);
          setInGoodsSubTab(true);
        }
        // 如需从子标签返回主标签，可添加如下逻辑
        // else if (inGoodsSubTab && route.name === '返回') {
        //   setCurrentTabs(originalTabs);
        //   setInGoodsSubTab(false);
        // }
      }}
    >
      {currentTabs.map((screen) => (
        <TopTabs.Screen key={screen.name} name={screen.name}>
          {(props) => <screen.component {...props} />}
        </TopTabs.Screen>
      ))}
    </TopTabs.Navigator>
  );
};

export default NavigationTopTabs;

2. 调整NavigationScreens.tsx #

移除不再使用的topTabs定义：

import NavigationStack from '../../components/navigation/NavigationStack';
import { NavigationTabProps } from '../../interfaces/Navigation';
import { FavoriteScreen } from '../authorized/FavoriteScreen';
import { HomeScreen } from '../authorized/HomeScreen';
import { PositionsScreen } from '../authorized/PositionsScreen';
import { SearchScreen } from '../authorized/SearchScreen';
import ServicesScreen from '../authorized/ServicesScreen';

const tabs: NavigationTabProps[] = [
  {
    name: 'Главная',
    focusedIcon: 'home',
    component: HomeScreen,
  },
  {
    name: 'Категории',
    focusedIcon: 'border-all',
    component: NavigationStack,
  },
  {
    name: 'Избранное',
    focusedIcon: 'star',
    component: FavoriteScreen,
  },
  {
    name: 'Поиск',
    focusedIcon: 'text-search',
    component: SearchScreen,
  },
];
export { tabs };

3. 修改NavigationDrawer.tsx #

手动定义Drawer选项，替代原有的topTabs.map逻辑：

import { createDrawerNavigator } from '@react-navigation/drawer';
import NavigationTopTabs from './NavigationTopTab';
import { ServicesScreen, GoodsScreen, PositionsScreen, HomeScreen, SearchScreen } from '../../screens/authorized';

const Drawer = createDrawerNavigator();
const NavigationDrawer = function () {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Назад"
        component={NavigationTopTabs}
        options={{
          headerTitleAlign: 'center',
          headerTitle: 'Разделы',
        }}
      />
      <Drawer.Screen
        name="Услуги"
        component={ServicesScreen}
        options={{
          headerShown: true,
          headerTitleAlign: 'center',
        }}
      />
      <Drawer.Screen
        name="Товары"
        component={GoodsScreen}
        options={{
          headerShown: true,
          headerTitleAlign: 'center',
        }}
      />
      <Drawer.Screen
        name="Позиции"
        component={PositionsScreen}
        options={{
          headerShown: true,
          headerTitleAlign: 'center',
        }}
      />
      <Drawer.Screen
        name="Недвижимость"
        component={HomeScreen}
        options={{
          headerShown: true,
          headerTitleAlign: 'center',
        }}
      />
      <Drawer.Screen
        name="Транспорт"
        component={SearchScreen}
        options={{
          headerShown: true,
          headerTitleAlign: 'center',
        }}
      />
    </Drawer.Navigator>
  );
};

export default NavigationDrawer;

补充说明 #

• 若需要从子标签组返回主标签，可在goodsTabs中添加“返回”标签，并在onTabPress中添加对应切换逻辑。
• 可根据需求调整子标签组的组件，不一定复用ServicesScreen。

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