react-native 0.74.0 更新 Yoga 为 v3.0 版本和之前的区别

原文：Yoga

1. 属性方向与行为方向一致

在 0.74 之前如果我们给元素设置了 flexDirection: 'row-reverse' 属性，那么所对应的前后左右的设置都是翻转后的，比如：

<View // #1
  style={{
    flexDirection: 'row',
    backgroundColor: 'red',
    margin: 10,
    width: 200,
    height: 100,
  }}>
  <View // #2
    style={{
      flexDirection: 'row-reverse',
      backgroundColor: 'blue',
      flex: 1,
      marginLeft: 50,
    }}>
    <View // #3
      style={{
        backgroundColor: 'green',
        height: '50%',
        flex: 1,
        marginLeft: 50,
      }}
    />
  </View>
</View>

我们看到 #2 设置的 marginLeft: 50 ，按以前的话，这个时候应该是距离右边的距离，也就是下面第一张图的样式，其中红色部分是 #1 的的背景颜色，蓝色是 #2 的，绿色是 #3 的。而现在保持跟 web 端一致，也就是即便使用 flexDirection: 'row-reverse' ，这个时候左边还是左边，右边是右边。

注意这里的方向可不是仅仅是 marginLeft ，而是任何属性的方向值，例举：margin 、padding 和 border 等等。 flexDirection: 'column-reverse' 并没有不一样的情况，因为之前就是即便设置了这个值，设置 marginBottom: 20 这样的值仍然是指到底部的距离，而不是由于反转变成顶部了。

2. 支持 align-content: 'space-evenly'

align-content 属性设置如何沿着弹性盒子布局的纵轴在内容项之间和周围分配空间。让我们来看看这几个属性的样式：

<View
  style={{
    flexDirection: 'row',
    backgroundColor: 'red',
    margin: 10,
  }}>
  <View
    style={{
      width: 200,
      height: 250,
      padding: 10,
      flexDirection: 'row',
      alignContent: 'flex-end', // 我们通过改变这个值来看效果
      flexWrap: 'wrap', // 只对子元素换行的有效，需要设置这个
      backgroundColor: 'blue',
    }}>
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
  </View>
</View>

1. flex-start

2. flex-end

3. center

4. space-around

5. stretch

6. space-between

7. space-evenly

3. 支持 position: 'static'

之前这个属性有两个值： absolute 和 relative ，其中 relative 是默认值，所以当我们子级设置 position: 'absolute' 后就是相对于父级的，如果我们想相对于父级的父级在以前是不可以的，除非你让父级也是 position: 'absolute' ，如果是这样的话，那么父级的布局也变成定位的了。如果你不想改变父级的布局，那么可以将属性设置成 position: 'static' 。这样子级就相对于父级了。

注意：只要开启新架构这个属性才生效

具体怎么开启新架构，请参考：启用新架构 。

看例子：

<View // #1
  style={{
    backgroundColor: 'blue',
    width: 200,
    height: 200,
    flexDirection: 'row-reverse',
  }}>
  <View // #2
    style={{
      backgroundColor: 'red',
      width: 100,
      height: 100,
      position: 'static',
    }}>
    <View // #3
      style={{
        backgroundColor: 'white',
        width: 25,
        height: '25%',
        left: 25,
        top: 25,
        position: 'absolute',
      }}
    />
  </View>
</View>

我们可以看到我们设置 #2 的 position 为 static ，这个时候 #3 就是基于 #1 的。看效果：

可以看到白色是相对于 #1 的，包括位置和高度计算都是基于 #1 的。如果我们删掉 #2 的 position: 'static' ，就看到的是下面的效果：