我有一个如下所示的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
?
答案 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)