文字省略号溢出

Question

我在 react-native.

中遇到了一些我认为很容易实现的布局

基本上我需要两个连续的视图，他们的 parent 有 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

尝试将 flexShrink: 1 添加到第一个内部视图的样式中

Answer 2

如果您将 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 row 项目，因此 flexes 水平和需要宽度，flex: 1 提供。

如果使用默认的列方向，它会起作用 w/o，例如像这样：

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

文字省略号溢出

Text elipsis overflowing

css

flexbox

reactjs

react-native

react-native-ios