设置父组件的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 下时会报错的。
概念 React-Native 中所有的布局均采用 Flex 布局。采用 Flex 布局的元素，称为 Flex 容...
flex布局前提条件--display: flex（react native 不用设置） 与flex布局相关的属性...
React 入门实例教程React-Native入门指南Flex 布局教程：语法篇React Native探索（二...
Flex Flex：弹性布局 React Native 的默认布局是flex布局 如果将父元素设置成弹性盒模型模式...
React Native - Flex布局 Flex布局概述 概念：弹性盒子布局 历史:性盒模型,该布局方案由W3...
React Native 原理 ES6 Flex 布局 React Navigation MobX 视频教程 网...
react native 的flex布局，是web的阉割版本，目前还不支持flex-shrink、flex-bas...
React Native flex 布局使用总结 父视图属性(容器属性)： flexDirection : 对子...
react native布局小知识之主次轴，排列方式 在react native中，我们使用方便快捷的Flex B...
React Native的初学者应该了解RN支持且只支持Flex布局。Flex布局相对于Android来说就是Li...
本文标题：react native flex布局
本文链接：https://www.haomeiwen.com/subject/ipuzphtx.html
网友评论