如何在一行中匹配内容并防止反应原生的溢出?

时间:2016-04-23 07:42:31

标签: css react-native flexbox

我有一个如下所示的tableview行。

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

如何使用flexbox模型实现这一目标?

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

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

此外,反应原生是否相当于text-overflow: ellipsis

2 个答案:

答案 0 :(得分:5)

您可以将文本上的flex:1设置为相对于其余弹性项目增长(此处为按钮)。 Button上没有flex设置,它将占用所需的空间。请参阅numberOfLines文档。您可以将其设置为1以使文本ellipsize

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

答案 1 :(得分:1)

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

flexShrink: 1

Source