如果对布局属性还不是很了解的可先看看
CrazyCodeBoy的React Native布局详细指南讲得很好。

一、我们在项目中一般使用的布局有哪些

我自己的理解分为以下两种（名字是自己取的方便理解）

• 一般布局
• 绝对布局和相对布局

一般布局（切记名字是我自己取的你可以用自己觉得恰当的名字）

这也是我们项目中用到得最多的。 我觉得这里可以通过三步去理解一般布局。

• 1.需要有父控件的大小。就好比你家房子知道有多大的空间才知道怎么去摆放家具一样。
• 2.需要知道控件的方向。这里有点类似android里边的线性布局。
• 3.子控件的居中显示。因为我发现居中属性是开发中用到的最多最多的。

效果图👇

layout.jpg

怎么使用布局属性来达到上图的效果。 以下是布局的灵魂

最重要的一点就是，父控件的属性决定子控件的摆放。
最重要的一点就是，父控件的属性决定子控件的摆放。
最重要的一点就是，父控件的属性决定子控件的摆放。

如果想弄好布局那么需要知道三个重要的属性

• flexDirection （控制子控件的摆放方向）
• justifyContent(他的作用与flexDirection在同轴上)
• alignItems（他的作用在flexDirection方向的垂直轴上）
  CrazyCodeBoy的React Native布局详细指南讲得很好。

代码如下

    <View
      style={{
        backgroundColor: '#65d2ff',
        height: 100,
        flexDirection: 'row',
        alignItems: 'center',
        
      }}>
        <TouchableOpacity onPress={()=>{
         
        }}>
      <View style={{backgroundColor: '#3F51B5', width: 100, height: 50}} />
      </TouchableOpacity>
      <View
        style={{
          backgroundColor: '#d73442',
          width: 150,
          height: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <View style={{backgroundColor: '#fbdba9', width: 120, height: 30}} />
      </View>
      <View style={{width: 100, height: 50, backgroundColor: '#FCA71A',}}>
        <View style={{backgroundColor: '#fbdba9', width: 70, height: 15,alignContent:'center',}} />
      </View>
    </View>

绝对布局和相对布局

总的来说绝对布局是相对于子控件的当前位子上做相对偏移，绝对布局是相对于当前所属的父控件做偏移。理解了这句话下面的就不用看了。

这里已经有人总结的非常好了
React Native中的postion定位
所以只讲需要注意的点

1. 绝对布局注意点：

绝对布局中的子布局既设置了偏移(left,bottom,top,right)又设置了alignSelf那么这时如果偏移方向与alignSelf的方向一致那么alignSelf属性将不起作用。

绝对布局例子如下1：

效果图👇

one.jpg

代码：

    <View
      style={{
        backgroundColor: '#65d2ff',
        flex: 1,
        flexDirection: 'column',//只有这里不同
        alignItems: 'center',
      }}>
      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: '#666',
          position: 'absolute',
          left: 50,
          alignSelf: 'center',
        }}
      />
    </View>

在这个例子中 父类控件{flexDirection: 'column'}为横向所以父控件的alignItems与子控件alignSelf一定是作用于与父控件方向相反的纵向。但是因为子控件设置的{ position: 'absolute', left: 50,}的属性也为纵向的偏移，与alignxxx的方向是同向。所以alignxxx将不起作用。

绝对布局例子如下2：

效果图👇

two.jpg

代码：

    <View
      style={{
        backgroundColor: '#65d2ff',
        flex: 1,
        flexDirection: "row",//只有这里不同
        alignItems: 'center',
      }}>
      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: '#666',
          position: 'absolute',
          left: 50,
          alignSelf: 'center',
        }}
      />
    </View>

下面的代码只改变了一行代码{flexDirection: "row",}。 父类控件{flexDirection: 'row'}为纵向向父控件的alignItems与子控件alignSelf一定是作用于与父控件方向相反的横向。子控件设置的{ position: 'absolute',left: 50,}的属性为纵向的偏移，与alignxxx的方向不同。所以{position: 'absolute',left: 50,}与alignxxx互不干扰。

绝对布局总结 ：

• 在绝对布局中 子控件的(left,bottom,top,right)属性优先于其他偏移属性。
• 当子控件的(left,bottom,top,right)属性与其他偏移属性方向相同时那么其他偏移属性将不生效，反之才生效。

2. 相对布局注意点：

相对布局例子1：

没有对子布局做任何相对的偏移
效果图：

one1.jpg

代码：

    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      
      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: '#65d2ff',
          alignSelf: 'center',
        }}
      />
    </View>

相对布局例子2：

对子布局相对左边偏移50
效果图：

two2.jpg

代码：

    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      
      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: '#65d2ff',
          position: 'relative',//添加相对属性
          left: 50,//添加相对偏移
          alignSelf: 'center',
        }}
      />
    </View>

例子1和例子2的代码差异如下：

defferent.jpg

相对布局总结：
相对布局是在所有属性的综合位子上做偏移。可以结合1、2两个例子看到：例子2中的相对偏移是基于例子1中的位置。