Question

我正在努力使用正确的样式，以避免应该包含在一行中的长文本或显示省略号之间的重叠以及应该也显示在应用程序中同一行的其他按钮之间的重叠。这个问题可以在下面的世博会草图中看到

https://snack.expo.io/Bk449wmAe

以下是组件的代码

  <View style={{flexDirection: 'row', marginTop: 50}}>
    <View style={{flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      marginVertical: 5}}>
      <Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{'Varun Gupta Varun Gupta Varun Gupta Varun Gupta'}</Text>
      <Text style={{fontSize: 10, fontStyle: 'italic'}}>{'Creator'}</Text>
    </View>
    <TouchableOpacity style={{alignSelf: 'center', padding: 5}}>
      <Text>{'Call'}</Text>
    </TouchableOpacity>
    <TouchableOpacity style={{alignSelf: 'center', padding: 5}}>
      <Text>{'Message'}</Text>
    </TouchableOpacity>
</View>

如果您加载了该应用，您会发现该名称与Call和Message按钮重叠，但它不应该重叠。我希望Creator文字与名称一致，Call和Message按钮显示在最右侧。对于例如如果您要将名称缩减为Varun Gupta，则会显示为Creator文字与名称相符，而Call和Message出现在最右侧。如果名称太长而无法放在一行中，那么我想显示多少适合一行，后跟Creator字符串后跟两个按钮。我在造型方面尝试过各种不同的组合而没有任何成功。我不确定为什么文本会溢出到同一行上的按钮中。当我检查Inspector中的元素时，似乎包含名称的View和Creator文本的大小正确，但包含该名称的Text组件将会消失边界，我不知道如何解决它。

如果我将flex: 1添加到<Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{'Varun Gupta Varun Gupta Varun Gupta Varun Gupta'}</Text>，它会修正宽度，但如果名称只是Varun Gupta，则Creator字符串不会坚持使用名称，但出现在最右边，这是预期的，但不是所希望的。

请帮助设计样式。

Answer 1

您可以使用lodash/truncate在名称末尾添加省略号：

const name = _.truncate('Some really long name that should be truncated', { separator: ' ', length: 25 })

...然后

<Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{name}></Text>

https://snack.expo.io/r1W-6omCg

React Native - 修复样式以避免文本与同一行上的按钮重叠

1 个答案: