深入理解react native布局（一）居中

最新推荐文章于 2023-07-04 23:12:20 发布

田猿笔记

最新推荐文章于 2023-07-04 23:12:20 发布

阅读量1.2w

点赞数

文章标签： flex react native

刚刚做完了一个项目，基本上把react native各种布局方式都用上了，发现了很多坑，也学会和很多，这里给大家分享一下哈。

首先我们要有个概念：react native里面是兼容大部分我们在css里面用到的布局方式，此外接触过css里面flex布局方式的话，我们会发现react native内的flex布局方式基本上和

css里的flex布局方式类似，所以不要觉得react native 布局不好做，其实他比起css来说要容易，比原生开发更是容易不知道多少倍。战略上藐视他!!!

对题：居中

首先大概说下flex需要知道的地方：

flex布局依赖于flexDirection的，意思就是说：以View为例，如果flex布局方式的话，如果它内部子组件的话他们的排列方向有横向和纵向之分。默认的react native已经设定了flex内部的布局为纵向的。

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red"}}>  
        <View style={{backgroundColor:"green"}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"orange"}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"blue"}}>  
          <Text>1</Text>  
        </View>  
      </View>  

结果：

那如果是横向的呢：

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red",flexDirection:"row",height:200}}>  
        <View style={{backgroundColor:"green"}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"orange"}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"blue"}}>  
          <Text>1</Text>  
        </View>  
      </View>  

结果：

是不是很简单呢，但是需要指出的是：

我们会发现在当flexDirection是“row”时，内部组件排列顺序为横向排列时，子组件的高度会自动撑满父组件。同样的道理如果是“column”时子组件的宽度会自动撑满父组件。记住这一点。

所以，大概有个印象了吧。

下面我们来说说flex上的值，我们在看别人代码的时候经常看到flelx:1,flex:2 之类的东东，这些到底是干嘛的呢？实践一下吧。我们以flexDirection为“column” 为例

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red",flexDirection:"column",height:200}}>  
        <View style={{backgroundColor:"green",flex:1}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"orange"}}>  
          <Text>3</Text>  
        </View>  
        <View style={{backgroundColor:"blue"}}>  
          <Text>3</Text>  
        </View>  
      </View>  

结果：

结果很明显啦，flex:1 会把其余组件（没有设置flex）剩余的空间全部占完。

那我们试试下面这些：

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red",flexDirection:"column",height:200}}>  
        <View style={{backgroundColor:"green",flex:1}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"orange",flex:1}}>  
          <Text>3</Text>  
        </View>  
        <View style={{backgroundColor:"blue",flex:1}}>  
          <Text>3</Text>  
        </View>  
      </View>  

结果：

所以是不是比起原生来简单多了，仅仅flex：1 ，就均分了。对我们已经发现了一种自动居中的方式了。

react native 实现居中有多种方式:

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red",flexDirection:"column",height:200}}>  
        <View style={{backgroundColor:"green",flex:1}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"orange"}}>  
          <Text>2</Text>  
        </View>  
        <View style={{backgroundColor:"blue",flex:1}}>  
          <Text>3</Text>  
        </View>  
      </View>  

结果：

so easy，居中了。

下面我们说说aliginItems 和justifyContent,这两个属性都是设置在父组件上，用于界定子组件的位置。

aliginItems：官方解释：

aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally. It works like align-items in CSS。

大白话：

如果父组件flexDirection设置为："column",则aliginItems指定的是在横向上，子组件的定位方式。同理如果父组件felxDirection设置为“row”，则alignItems指定的是在纵向上子组件的定位方式。

上代码：

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red",flexDirection:"column",height:200,alignItems:"center"}}>  
        <View style={{backgroundColor:"green",flex:1}}>  
          <Text>1</Text>  
        </View>  
        <View style={{backgroundColor:"orange"}}>  
          <Text>2</Text>  
        </View>  
        <View style={{backgroundColor:"blue",flex:1}}>  
          <Text>3</Text>  
        </View>  
      </View>  

结果：

ok，我们貌似已经实现垂直水平居中了。

so，那justifyContent这个属性是做什么的呢？

justifyContent：官方解释：

justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically. It works like justify-content in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details.

大白话：如果flexDirection为“row”，那么justifyContent指定的是子组件在横向上的对齐方式，如果flexDirection为“column”则justifyContent指定的是子组件在纵向上的对齐方式。

上代码：

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red",flexDirection:"column",height:200,justifyContent:"center"}}>  
        <View style={{backgroundColor:"orange"}}>  
          <Text>2</Text>  
        </View>  
</View>  

结果：

ok。

在说说我们的aliginSelf属性

我们经常会遇到这样的情况

这在react native里面怎么实现呢？呵呵，这就用到我们说的alignSelf属性了，注意alignSelf是标定在子组件上的，用于指定子组件的对齐方式。如果父组件的flexDirection是“row”，那么alignSelf就是标定子组件在竖直方向上的对齐方式，同理如果父组件的flexDirection标定为“column”，那么alignSelf指定的就是子组件在水平方向

上代码：

 
   [javascript]  
   view plaincopy
<View style={{backgroundColor:"red",flexDirection:"column",height:200,justifyContent:"center"}}>  
        <View style={{backgroundColor:"orange",flexDirection:"row",alignItems:"center"}}>  
          <Text style={{fontSize:40}}>你好,</Text>  
          <Text style={{fontSize:15,alignSelf:"flex-end"}}>小明我们明天就要去</Text>  
          <Text style={{fontSize:40}}>长城</Text>  
          <Text style={{fontSize:15,alignSelf:"flex-end"}}>了</Text>  
        </View>  
      </View>  