React Native文本截断布局异常问题求解决方案

当前代码如下（注：添加flexShrink: 1后效果无差异）：

<View
  style={[
    GlobalStyles.row,
    { width: '100%', gap: 10, justifyContent: 'space-between' },
  ]}>
  <View style={[GlobalStyles.row, { flex: 1, gap: 3 }]}>
    <Text
      style={{
        color: COLORS.textBlack,
        fontSize: 16,
        fontWeight: '600',
      }}
      numberOfLines={1}>
      TEMBEA KENYA COMMUNITY
    </Text>
    <Iconify
      icon="fluent:checkmark-starburst-24-filled"
      size={16}
      color={COLORS.bgPrimary}
    />
  </View>
  <Text
    style={{
      color: COLORS.statusBorder,
      fontSize: 12,
      fontWeight: '600',
    }}
    numberOfLines={1}>
    11 months
  </Text>
</View>

当前显示问题：左侧文本过长时会挤压右侧的“11 months”，导致时间文本无法完整显示。

期望效果：左侧文本自动截断（保留单行显示），图标紧跟文本右侧，右侧时间文本始终固定在最右侧，不被挤压。

尝试给左侧文本添加flex:1后，文本与图标之间出现不必要的空白间隔，不符合预期。

开发设备：Tecno Pop 8

修改左侧文本的样式，添加flexShrink: 1和minWidth: 0，同时优化父容器对齐方式，即可实现预期效果：

<View
  style={[
    GlobalStyles.row,
    { width: '100%', gap: 10, justifyContent: 'space-between' },
  ]}>
  <View style={[GlobalStyles.row, { flex: 1, gap: 3, alignItems: 'center' }]}>
    <Text
      style={{
        color: COLORS.textBlack,
        fontSize: 16,
        fontWeight: '600',
        flexShrink: 1,
        minWidth: 0, // 关键：允许文本容器收缩至小于内容宽度
      }}
      numberOfLines={1}>
      TEMBEA KENYA COMMUNITY
    </Text>
    <Iconify
      icon="fluent:checkmark-starburst-24-filled"
      size={16}
      color={COLORS.bgPrimary}
    />
  </View>
  <Text
    style={{
      color: COLORS.statusBorder,
      fontSize: 12,
      fontWeight: '600',
      whiteSpace: 'nowrap', // 确保时间文本不换行
    }}
    numberOfLines={1}>
    11 months
  </Text>
</View>

1. minWidth: 0：React Native中Flex子元素默认不会收缩到小于自身内容的最小宽度，这个属性打破该限制，让文本容器能随父容器空间收缩。
2. flexShrink:1：设置文本在父容器空间不足时优先收缩，配合numberOfLines={1}实现单行截断，避免挤压图标和右侧时间。
3. alignItems: 'center'：让图标与文本垂直居中对齐，提升视觉一致性。
4. whiteSpace: 'nowrap'：保证右侧时间文本始终单行显示，不会因空间不足换行。

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