React Native切换Bottom Tab页面时修改头部标题文本问题咨询

问题原因 #

你当前的导航层级为NavigationContainer -> DrawerNavigator -> MainTabScreen（内部嵌套底部TabNavigator），头部标题的控制权放在最外层的Drawer导航上，底部Tab切换时外层Drawer的路由没有触发更新，所以标题不会跟随变化。另外你当前的代码存在冗余配置：MainTabScreen中定义的HomeStack里除了第一个对应BorderScreens的Home路由，其余四个Screen完全没有被使用，属于无效代码。

改造步骤 #

1. 给底部Tab的每个页面设置明确标识 #

先修改BorderScreens中Tab.Screen的name属性，从空值改为对应页面的唯一标识：

<Tab.Navigator
  initialRouteName="Home"
  screenOptions={{
    gestureEnabled: false,
    headerTintColor: '#fff',
    headerTitleStyle:{
      fontWeight: 'bold',
    }
  }}
>
  <Tab.Screen
    name="Home"
    component={Screen1}
    options={{                  
      tabBarColor: '#fff',
      tabBarIcon:({color}) => <Icon name ="home" size={26}/>,
    }}
  />
  <Tab.Screen
    name="Community"
    component={Screen2}
    options={{                  
      tabBarColor: '#fff',
      tabBarIcon:({color}) => <Icon name ="account-group" size={26}/>,
    }}
  />
  <Tab.Screen
    name="Safety"
    component={Screen3}
    options={{                  
      tabBarColor: '#fff',
      tabBarIcon:({color}) => <Icon name ="shield" size={26}/>,
    }}
  />
  <Tab.Screen
    name="Spa"
    component={Screen4}
    options={{                  
      tabBarColor: '#fff',
      tabBarIcon:({color}) => <Icon name ="spa" size={26}/>,
    }}
  />
  <Tab.Screen
    name="Profile"
    component={Screen5}
    options={{                  
      tabBarColor: '#fff',
      tabBarIcon:({color}) => <Icon name ="account" size={26}/>,
    }}
  />
</Tab.Navigator>

2. 简化MainTabScreen的冗余配置 #

删除原MainTabScreen中无用的HomeStack配置，直接返回底部Tab导航即可：

import  Screen1  from './Screen1'
import  Screen2  from './Screen2'
import  Screen3  from './Screen3'
import  Screen4  from './Screen4'
import  Screen5  from './Screen5'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function MainTabScreen() {
  return(
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        gestureEnabled: false,
      }}
    >
      {/* 上一步修改后的5个Tab.Screen */}
    </Tab.Navigator>
  )
}
export default MainTabScreen;

3. 修改Drawer导航的标题匹配逻辑 #

在最外层的Stack Manager文件中，修改Drawer.Screen的options配置，读取嵌套Tab的激活状态匹配对应标题：

// 新增Tab名称和标题的映射函数
const getTabTitle = (tabName) => {
  switch(tabName) {
    case 'Home': return i18n.t('Screen1');
    case 'Community': return i18n.t('Screen2');
    case 'Safety': return i18n.t('Screen3');
    case 'Spa': return i18n.t('Screen4');
    case 'Profile': return i18n.t('Screen5');
    default: return i18n.t('Screen1');
  }
}

// 修改Drawer.Screen的options配置
<Drawer.Screen 
  name="HomeScreen" 
  component={MainTabScreen} 
  options={({route, navigation}) => {
    // 获取当前激活的底部Tab名称
    const activeTabName = route.state?.routes[route.state?.index ?? 0]?.name ?? 'Home';
    return {
      headerTitle: getTabTitle(activeTabName),
      headerLeft: () =>(
        <Icon.Button 
          name="menu" 
          size={25} 
          backgroundColor="#fff" 
          color="#009387" 
          onPress={() => navigation.openDrawer()}
        />
      )
    }
  }}
/>

实现原理 #

React Navigation的嵌套导航中，子导航的路由状态会存储在父路由的state属性中，每次底部Tab切换时，父路由的state会同步更新当前激活的子路由索引和路由信息，读取该信息即可动态匹配对应标题。

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