css - 如何连续放置内容并防止 react native 溢出？

Question

我有一个如下所示的表格 View 行。

<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 可以根据本地状态增大或缩小。

此外，在 react-native 上是否有等同于 text-overflow: ellipsis 的东西？

Answer 1

您可以在文本上设置 flex:1 以相对于剩余的 flex 元素(此处为按钮)增长。 Button 上没有设置 flex，它会占用它需要的空间。参见 numberOfLines文档。您可以将其设置为 1 以使文本变成椭圆形

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