react native flex布局

问题:设置alignItems为baseline在安卓上不生效。

设置父组件的alignItems为baseline后,在ios上显示正常,但是安卓上就不生效了。显示成下图的样式


image.png

解决方法:将父组件View改为Text,形成嵌套 Text 组件

<Text style={CircleStyles.titleBackView}>
  <Text style={CircleStyles.title}>{number}</Text>
  <Text style={CircleStyles.subTitle}>{unit}</Text>
</Text>

然后显示就正常了。


image.png

但是这样会有一个问题:如果 Text 嵌套 Text,Text 内部将不再是 flexbox 布局,而是纯文本布局。这意味着,内部 Text 组件设置长宽间距都会没有效果(如 margin)。而且 Text 只能嵌套 Text 组件,嵌套其他组件在 Android 下时会报错的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容