如何切换Tab时动态修改react-navigation的头部导航标题

嘿，我来帮你搞定这个动态标题的需求！你现在的问题是外层StackNavigator的标题固定为“Welcome”，想要切换Tab时自动更新对应的标题，下面给你两种可行的解决方案，完全适配你用的react-navigation@2.0.1和react-native@0.55.3版本。

方法一：通过外层Stack监听Tab路由状态动态设置标题 #

这种方法不需要修改Tab的点击事件，直接通过外层Stack的navigationOptions读取当前激活的Tab路由信息来设置标题，逻辑简洁且稳定。

步骤1：给每个Tab定义对应标题 #

先在你的createTabNavigator中，给每个Tab的navigationOptions添加专属标题（或者直接记住Tab的routeName对应的标题）：

const mytabnavigator= createTabNavigator({
  Tab1: {
    screen: Cstack,
    navigationOptions: ({navigation}) => ({
      headerTintColor: 'white',
      title: 'Cash', // 给Tab1设置对应标题
      tabBarIcon: ({focused, tintColor}) => {
        return ( <IconIonicons name='ios-cash' type='ionicon' color="#FFFFFF" size={26} /> );
      },
    })
  },
  Tab2: {
    screen: Dstack,
    navigationOptions: ({navigation}) => ({
      headerTintColor: 'white',
      title: 'Settings', // 给Tab2设置对应标题
      tabBarIcon: ({focused, tintColor}) => {
        return ( <IconIonicons name='ios-card' type='ionicon' color="#FFFFFF" size={26} /> );
      },
    })
  }
}, {
  tabBarOptions: {
    showIcon: true,
    style: { backgroundColor: '#3f51b5', },
    inactiveTintColor: '#FFFFFF',
    activeTintColor: "#FFFFFF"
  },
});

步骤2：修改外层Stack的navigationOptions动态获取标题 #

更新你的StackTab定义，通过navigation.state获取当前激活的Tab路由，进而拿到对应的标题：

const StackTab = createStackNavigator({
  stacktab: {
    screen: mytabnavigator,
    navigationOptions: ({navigation}) => {
      // 获取当前TabNavigator的路由状态
      const tabNavigatorState = navigation.state.routes[navigation.state.index];
      // 根据Tab的routeName匹配对应标题（2.x版本用这种方式更稳定）
      const currentTitle = tabNavigatorState.routeName === 'Tab1' ? 'Cash' : 'Settings';
      
      return {
        title: currentTitle,
      };
    }
  }
});

方法二：通过Tab点击事件主动更新外层Stack标题 #

这种方法是在切换Tab时，主动调用navigation.setParams更新外层Stack的标题，适合需要更灵活控制标题逻辑的场景。

修改Tab的navigationOptions添加点击事件 #

在每个Tab的navigationOptions中添加tabBarOnPress，触发时更新外层Stack的标题参数：

const mytabnavigator= createTabNavigator({
  Tab1: {
    screen: Cstack,
    navigationOptions: ({navigation}) => ({
      headerTintColor: 'white',
      tabBarIcon: ({focused, tintColor}) => {
        return ( <IconIonicons name='ios-cash' type='ionicon' color="#FFFFFF" size={26} /> );
      },
      tabBarOnPress: ({navigation, defaultHandler}) => {
        // 先执行默认的Tab切换逻辑
        defaultHandler();
        // 更新外层Stack的标题参数
        navigation.setParams({ title: 'Cash' });
      }
    })
  },
  Tab2: {
    screen: Dstack,
    navigationOptions: ({navigation}) => ({
      headerTintColor: 'white',
      tabBarIcon: ({focused, tintColor}) => {
        return ( <IconIonicons name='ios-card' type='ionicon' color="#FFFFFF" size={26} /> );
      },
      tabBarOnPress: ({navigation, defaultHandler}) => {
        defaultHandler();
        navigation.setParams({ title: 'Settings' });
      }
    })
  }
}, {
  tabBarOptions: {
    showIcon: true,
    style: { backgroundColor: '#3f51b5', },
    inactiveTintColor: '#FFFFFF',
    activeTintColor: "#FFFFFF"
  },
});

修改外层Stack读取参数作为标题 #

更新StackTab的navigationOptions，从路由参数中获取标题：

const StackTab = createStackNavigator({
  stacktab: {
    screen: mytabnavigator,
    navigationOptions: ({navigation}) => ({
      // 优先取参数中的标题，默认值设为'Welcome'
      title: navigation.state.params?.title || 'Welcome'
    })
  }
});

两种方法都能实现切换Tab时动态修改标题的效果，你可以根据自己的代码习惯选择其中一种。测试一下，切换Tab的时候标题就会跟着变化啦！

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