React Native UI布局总结

1.在React Native（RN）中提供了只有两种布局，分别是：absolute和relative。

      如果你之前是搞安卓开发的会觉得RN设计非常怪异，在我们安卓原生开发中，决定用什么布局的是由parent决定的，如：AbsoluteLayout和RelativeLayout,而在RN开发中，决定用什么布局的是有child来决定的。

比如:<View><Text style={{position:'absolute'}}></View> 这样Text组件相对于外层parent组件是相对布局，同理我们可以修改成relative。

      我们可以使用 left，top，right，bottom来控制chilid的位置，其实很简单，如图：

      

  absolute：

       view1的样式:  { position:'absolute',left:5,top:5 }.

       view2的样式:  { position:'absolute',right:10,bottom:10 }.

  relative:

      view1的样式:  { position:'relative',left:5,top:5 }.

      view2的样式:  { position:'relative',left:50,top:30 }.

    

     2.alignItems和justifyContent的理解。

     在这里说明一下，alignItems和justifyContent并不是针对水平和垂直方向的操作，它们的操作效果取决于flexDirection的方向.  这点有点类似于安卓布局中的layout_weight它的大小取决于你是用match_parent还是用wrap_content，下面我简单介绍下。

     首先确定flexDirection的方向:

     column（默认）：                                                             

     alignItems:flex_start,flex_end,center,stretch

     justifyContent:flex_start,flex_end,center,stretch

                  

 

    row: 当方向为row的情况刚好和Column相反，图就省略了。

   总结：方向为row的alignItems对应的是方向为column的justifyContent，方向为row的justifyContent对应的是方向为column的alignItems。(有点类似于安卓布局中的gravity)
--------------------- 
作者：jj120522 
来源：CSDN 
原文：https://blog.csdn.net/jj120522/article/details/51869643 
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://my.oschina.net/u/4042953/blog/2994222