如何使内容适合一行并防止在 react-native 中溢出

Question

>我有一个如下所示的表视图行。

<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
  <Text>{user.fullName}</Text>
  <Button/>
</View>

上面呈现，以便名称粘在左侧，按钮粘在右侧。

-----------------------------------
 User's Full Name           Button
-----------------------------------

当用户的全名足够短时，一切都很好。

但是，当用户名很长时。这就是它的样子。

-----------------------------------
 User's Very Very Long Full Name         Button
-----------------------------------

现在，行

内容溢出行的宽度，按钮退出屏幕并变得不可见。

我想要的是这个。

-----------------------------------
 User's Very Very Long...   Button
-----------------------------------

如何使用弹性框模型实现此目的？

如何使name增长并填充可用宽度，但不超过可用宽度？

请注意，Button可以根据本地状态增长或缩小。

另外，在反应原生上是否有等效的text-overflow: ellipsis？

Answer 1

您可以在文本上设置flex:1以相对于剩余的弹性项目增长（此处为按钮）。按钮上没有弹性设置，它将占用所需的空间。请参阅行数文档。您可以将其设置为 1 以使文本椭圆化

<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
  <Text numberOfLines={1} style={{flex:1}}>{user.fullName}</Text>
  <Button/>
</View>

Answer 2

我有一个非常相似的问题，并通过将其添加到包含文本的视图中来修复它。然后省略号出现，文本不再溢出。

flexShrink: 1

源