例如,拼接三个Text,text1、text2、text3。如果内容超过一行,需要在行末换行。如果需要在text2的某个位置换行,实际效果是text2直接到第2行显示了,第一行只显示了text1。代码如下:
<View style={{flex-direction:'row',justify-content:'flex-start'}}>
<Text1></Text1>
<Text2></Text2>
<Text3></Text3>
</View>
解决方案:外层不使用flex布局,在拼接的3个text外层再套一层Text即可,变成
<Text>
<Text1></Text1>
<Text2></Text2>
<Text3></Text3>
</Text>
原因:flex布局会把内部元素当成一个个矩形块,因为text1矩形块很短所以显示没问题,text2矩形块在第一行展示不下,矩形块又不能分割,所以就会换到第2行。外层使用Text,是因为Text组件内部采用文本布局,不是flex,所以会正常的折行。
下面是官方文档0.63版本对Text组件的描述: