react 布局篇

网友投稿 1151 2022-11-17

react 布局篇

react 布局篇

FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题,因为既然React Native选择用FlexBox布局,那么React Native对FlexBox的支持自然会做的很好。

宽和高

学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸,也就是大小。

像素无关

在React Native中尺寸是没有单位的,它代表了设备独立像素。

尺寸

上述代码,运行在Android上时,View的长和宽被解释成:100dp 100dp单位是dp,字体被解释成16sp 单位是sp,运行在iOS上时尺寸单位被解释称了pt,这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变;

和而不同

值得一提的是,React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。但有些地方还是有些出入的,如:

React Native中的FlexBox 和Web CSSS上FlexBox的不同之处

flexDirection: React Native中默认为​​flexDirection:'column'​​​,在Web CSS中默认为​​flex-direction:'row'​​alignItems: React Native中默认为​​alignItems:'stretch'​​​,在Web CSS中默认​​align-items:'flex-start'​​flex: 相比Web CSS的flex接受多参数,如:​​flex: 2 2 10%;​​,但在 React Native中flex只接受一个参数不支持属性:align-content,flex-basis,order,flex-basis,flex-flow,flex-grow,flex-shrink

以上是React Native中的FlexBox 和Web CSSS上FlexBox的不同之处,记住这几点,你可以像在Web CSSS上使用FlexBox一样,在React Native中使用FlexBox。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Python3 assert(断言)
下一篇:Docker
相关文章

 发表评论

暂时没有评论,来抢沙发吧~