React Navigation V6 设置headerLeft后headerTitleStyle不生效问题求助

问题原因 #

你使用的@react-navigation/native-stack是基于原生导航实现的栈导航，自定义headerLeft组件后会触发原生端的头部布局重新计算，存在兼容性bug导致headerTitleStyle配置失效，属于React Navigation V6原生栈的已知问题。

解决方案 #

方案1：自定义headerTitle组件（推荐，不影响原生栈性能）

直接在screenOptions中新增headerTitle配置，主动给标题设置样式，替换原有headerTitleStyle的配置即可：

// 修改home.navigator.js中Stack.Navigator的screenOptions配置
screenOptions={{
  headerStyle: {
    backgroundColor: colors.bg.secondary,
  },
  headerLeft: () => (
    <TouchableOpacity>
      <MenuIcon height={52} width={52} weight={1.5} color={colors.brand.secondary} />
    </TouchableOpacity>
  ),
  // 新增自定义标题配置
  headerTitle: (props) => (
    <Text style={{
      fontFamily: fonts.black,
      color: colors.brand.secondary,
      fontSize: 18 // 可根据需求调整尺寸
    }}>
      {props.children}
    </Text>
  )
}}

方案2：切换为JS实现的栈导航

如果不想改动标题配置，可以将createNativeStackNavigator替换为@react-navigation/stack包提供的createStackNavigator，该实现为JS侧渲染头部，不存在原生布局兼容问题，原有headerTitleStyle配置可直接生效，缺点是复杂页面场景下性能略低于原生栈。

额外注意 #

你原有headerStyle中配置的color属性不会生效，头部标题的文字颜色需要配置在headerTitleStyle或者自定义headerTitle的样式中。

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