react-native中flexbox布局总结

最近看了react-native的 flexbox的布局,它的布局和安卓ios完全不同，但是可以实现一些效果，监于本人开发过ios和android应用，对布局有一定的了解，遂将flexbox与ios和android中的布局进行比较.

它们都可以控制控件收缩还是拉伸

android:match_parent,wrap_content

ios:     compress resistence priority, hugging priority

flex:    flex=0, flex=1

但是flex的布局功能比ios和android自带的布局方式都强大

1.flex可以方便的控制相邻控件的比例，这在android上可以通过linearlayout来做到，而在ios上不容易做到

2.flex的布局方式更灵活,android中一般会用到LinearLayout,FrameLayout,RelativeLayout,iOS的storyboard和xib中使用AutoLayout来控制控件的缩放关系，难以修改。而flex的布局像是android的LinearLayout内嵌RelativeLayout，比AutoLayout的方式修改灵活。

flex=0相当于android布局中的wrap_content和ios autolayout中的高content hugging priority

flex=1相当于android布局中的match_parent和ios autolyaout中的高content compression resistence priority

一个组件中只有一个flex值，那么flex的值是控制高度还是宽度的呢

这取决于它的父容器的flexDirection的值

当然，对于内部元素来说

元素的默认属性值是flex:0,flexDirection:'column',alignItems:'stretch',justifyContent:'flex-start'

1.当父元素的flexDirection='column'时 

flex控制的是高度的填充比率,

组件的宽度由父容器的alignItems属性控制 

1)alignItems的值是stretch时 宽度为match_parent

2)当alignItems的值是auto,flex-start,flex-end,center时，宽度为wrap_content

2.当父元素的flexDirection='row'时

flex控制的是宽度的填充比率,

组件的高度由父容器的alignItems属性控制 

1)alignItems的值是stretch时 高度为match_parent

2)当alignItems的值是auto,flex-start,flex-end,center时，高度为wrap_content