如何在一行中放入内容并防止反应本机溢出？

我有一个如下所示的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上反应原生？

来源

2016-04-23 Joon

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

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

来源

2016-04-23 11:25:58

如何在一行中放入内容并防止反应本机溢出？

回答

相关问题