关于RN的flexbox tips

flexbox 日常积累的小tips

Tips

react 宽度基于pt为单位, 可以通过Dimensions 来获取宽高,PixelRatio 获取密度
view默认宽度为100%
水平居中用alignItems, 垂直居中用justifyContent
基于flex能够实现现有的网格系统需求,且网格能够各种嵌套无bug
图片布局

通过Image.resizeMode来适配图片布局,包括contain, cover, stretch
默认不设置模式等于cover模式
contain模式自适应宽高,给出高度值即可
cover铺满容器,但是会做截取
stretch铺满容器,拉伸

定位

定位相对于父元素,父元素不用设置position也行
padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom

文本元素

文字必须放在Text元素里边
Text元素可以相互嵌套,且存在样式继承关系
numberOfLines 需要放在最外层的Text元素上,且虽然截取了文字但是还是会占用空间

react native 的flex布局,是web的阉割版本,目前还不支持 flex-shrink 、 flex-basis 、 order 几种flex属性,同时现有支持的flex属性值也不全。

alignItems

调整伸缩项目在侧轴上的定位方式
可选值: flex-start , flex-end , center , stretch

alignSelf

alignSelf 属性会覆盖容器的 alignItems 属性,取值和用法 alignItems 一样。
可选值: auto , flex-start , flex-end , center , stretch
justifyContent与 alignItems 相呼应,表示元素在主轴(横轴)方向上的对齐方式可选值: flex-start , flex-end , center , space-between , space-around

flexDirection

子元素在父容器中的排列位置,相比于web,少了 row-reverse 和 column-reverse 两个值
可选值: row , column

flexWrap

子元素超出父容器时是否换行
可选值: wrap , nowrap

有兴趣的可以挑战一下这个游戏,能加强你对flexbox的运用~
images
Flexbox Froggy

坚持原创技术分享,您的支持将鼓励我继续创作!