React Native导航标题过长挤压headerRight/Left，maxWidth适配引发截断问题

问题场景 #

导航标题文本过长时，会优先挤压headerLeft、headerRight组件的空间，待左右组件被挤压到极限后才触发标题文本的省略效果。若直接在headerTitleStyle中添加maxWidth: '90%'，虽能避免挤压左右组件，但会导致原本无需截断的短标题也被错误截断。

修复方案 #

方案1：固定左右组件空间+自定义标题组件

给左右头部容器添加flexShrink: 0固定其空间，同时用自定义标题组件实现自适应省略：

// 自定义标题组件
import { Text, View } from 'react-native';

const CustomHeaderTitle = ({ title }) => (
  <View style={{ flex: 1, alignItems: 'center' }}>
    <Text
      style={{
        fontSize: 24,
        color: colors.whiteTwo,
        flexShrink: 1,
        maxWidth: '100%',
        textAlign: 'center',
        numberOfLines: 1
      }}
    >
      {title}
    </Text>
  </View>
);

// 导航配置
{
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: colors.blueOne },
    headerRightContainerStyle: { paddingRight: 20, flexShrink: 0 },
    headerLeftContainerStyle: { paddingLeft: 20, flexShrink: 0 },
    headerTintColor: colors.whiteTwo,
    // 替换默认标题为自定义组件
    headerTitle: () => <CustomHeaderTitle title={routeTitle} />,
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: () => <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />,
    headerRight: () => <HeaderRight routeName={route.name} />
}

原理：flexShrink: 0确保左右组件不会被压缩，自定义标题组件通过flexShrink: 1和numberOfLines:1，仅在标题超出可用空间时触发省略，短标题则正常显示。

方案2：调整头部flex布局

直接修改导航头部的布局结构，让标题区域占据剩余空间：

{
    headerTitleAlign: 'center',
    headerStyle: { 
      backgroundColor: colors.blueOne,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between'
    },
    headerRightContainerStyle: { paddingRight: 20, flexShrink: 0 },
    headerLeftContainerStyle: { paddingLeft: 20, flexShrink: 0 },
    headerTitleStyle: {
      fontSize: 24,
      color: colors.whiteTwo,
      flex: 1,
      textAlign: 'center',
      numberOfLines: 1,
      flexShrink: 1
    },
    headerTintColor: colors.whiteTwo,
    title: routeTitle,
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: () => <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />,
    headerRight: () => <HeaderRight routeName={route.name} />
}

原理：通过headerStyle设置flex布局，左右容器固定空间，标题区域用flex:1占据剩余空间，自然实现标题空间不足时自动省略，且不影响短标题显示。

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