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的运用~
Flexbox Froggy
