使用Stack Navigation嵌套Tab导航时设置Header Title无效的问题

嘿，我帮你梳理下问题根源：当你把BottomTabNavigator嵌套在Stack导航里时，Header的控制权其实在外层Stack导航手中，你直接在Tab导航的navigationOptions里设置headerTitle自然不会生效——因为Tab导航本身默认不负责渲染Header，这块配置会被外层Stack覆盖掉。

给你两个实用的解决方案：

方案一：在外层Stack的Tab容器里动态设置标题 #

如果希望根据当前激活的Tab显示对应标题（或者固定显示Hassam），可以在包含Tab导航的Stack Screen中配置navigationOptions：

// 先定义你的Tab导航
const tabScreen = createBottomTabNavigator({
  Tab1: { screen: Tab1 },
  Tab2: { screen: Tab2 },
  Tab3: { screen: Tab3 },
});

// 再定义外层的Stack导航
const MainStack = createStackNavigator({
  TabContainer: {
    screen: tabScreen,
    navigationOptions: ({ navigation }) => {
      // 获取当前激活的Tab路由名称
      const activeTabName = navigation.state.routes[navigation.state.index].routeName;
      // 可根据Tab名称设置不同标题，或直接固定为'Hassam'
      return {
        headerTitle: activeTabName === 'Tab1' ? '首页' : 'Hassam'
      };
    }
  }
});

方案二：给每个Tab屏幕单独设置专属标题 #

如果想让每个Tab切换时显示不同的Header标题，可以直接在对应Tab组件里配置navigationOptions：

// 以Tab1为例
const Tab1 = () => {
  return <View><Text>Tab1内容</Text></View>;
};

// 给Tab1设置专属Header标题
Tab1.navigationOptions = {
  headerTitle: '我的Tab1'
};

// Tab2、Tab3按同样方式设置即可

这样配置后，切换Tab时外层Stack的Header就会自动同步显示对应标题了。

内容的提问来源于stack exchange，提问作者M.Hassam Yahya