深入理解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内部的布局为纵向的。

<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>

结果：

那如果是横向的呢：

<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>

结果：

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

我们