React Native UI布局总结

      1.在React Native(RN)中提供了只有两种布局,分别是:absoluterelative

      如果你之前是搞安卓开发的会觉得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.alignItemsjustifyContent的理解。

     在这里说明一下,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)

    




  



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页