如何解决 React Native 中的文本截断问题？

Question

这是我当前的代码

<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>

我目前正在得到这个（图1） 但我想实现这个（图2）
但是当我将 flex: 1 添加到文本中时，它的行为就像通过添加这样的空格来调整内容之间的位置（图 3） .

我正在使用 Tecno pop 8 进行开发。

Answer 1

尝试将 {flexShrink: 1} 添加到文本组件，如下例所示

<Text numberOfLines={1} style={{ flexShrink: 1 }}>User Name Here</Text>

例如：

    <View
        style={{
          alignSelf: 'stretch',
          gap: 10,
          paddingHorizontal: 20,
          flexDirection: 'row',
        }}>
        <View
          style={{
            width: 40,
            height: 40,
            borderRaius: 20,
            backgroundColor: '#00000030',
          }}
        />
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View
            style={{
              flexDirection: 'row',
              flex: 1,
              gap: 4,
              alignItems: 'center',
            }}>
            <Text numberOfLines={1} style={{ flexShrink: 1 }}>User Name Here</Text>
            <Text>✅</Text>
          </View>
          <View style={{ width: 20, height: 20, backgroundColor: 'red' }} />
        </View>
        
      </View>

这是一个例子：零食

输出：