文本省略号溢出

Question

我在获取我认为是在 react-native 中实现的简单布局时遇到了一些麻烦。

基本上我需要连续两个视图，他们的父母有justifyContent: 'space-between'.

在第一个视图上有两个文本组件，其中一个在增长时必须有一个省略号。

我所期望的：

相反，我得到的是该文本组件溢出：

    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>

      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text>AVATAR</Text>
        <View style={{ marginHorizontal: 15 }}>
          <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
        </View>
      </View>

      <View>
        <Text>9,999,999,999.99</Text>
      </View>

    </View>

一个可以玩的沙盒示例：https : //snack.expo.io/HkeFQbyvf

Answer 1

如果你添加flex: 1到内部<View style={{ marginHorizontal: 15 }}>它会起作用

更新的代码示例

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1, flexDirection: 'row' }}>
      <Text>AVATAR</Text>
      <View style={{ flex: 1, marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

根据评论更新

主要原因是因为内部<View style={{ marginHorizontal: 15 }}>是一个 flex行项目，因此水平弯曲并需要一个宽度，它flex: 1提供。

如果使用默认的列方向，它会在没有的情况下工作，例如：

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1 }}>
       <View style={{ marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>