React Native V0.74 稳固版发布

React Native 最近有个令人高兴的消息——V0.74 版本在几天前发布了，包含了凌驾1600个提交。亮点如下：
  

• Yoga 3.0
  
• 新架构：默认无桥模式
  
• 新架构：批量 onLayout 更新
  
• 新项目使用 Yarn 3
  

  下面我们深入了解每个新亮点。
  

  Yoga 3.0

  首先了解一下 React Native 中的 Yoga 是什么。
  Yoga —— 布局引擎

  Yoga 是一个由 Meta 开发的开源布局引擎。它负责在用户界面内排列和定位 UI 元素（如按钮、文本、图像等）。
  Yoga 为每个 UI 元素计算以下四个方面：
  

• 定位
  
• 尺寸
  
• 对齐
  
• 间距
  

  通过 Yoga，你可以创建响应式布局，顺应差别的屏幕尺寸和方向。它还在 React Native 中实现了一个广泛使用的概念——CSS Flexbox。因此，Yoga 可以说是 React Native 机动 UI 的核心。
  Yoga 3.0 —— 新特性

  在之前的所有 React Native 版本中，存在一些不精确的布局行为。Yoga 3 解决了这些问题。此中一个最常见的问题是 ‘row-reverse’ 样式无法正常工作。
  来看下图，左边是 V0.73，右边是 V0.74。
  

  在上图中，我们有一个 <Container />，内部是一个 <arent /> 组件，再内部是两个 <Child /> 组件。
  我们在 <arent /> 组件中应用了如下样式：

1. // <Parent /> 组件的样式
2. style={{
3.       flexDirection: 'row-reverse',
4.       backgroundColor: 'dodgerblue',
5.       flex: 1,
6.       marginLeft: 100,
7.       marginRight: 20,
8.       marginVertical: 20,
9.       alignItems: 'center'
10. }}

复制代码

你注意到了吗，我们为 <arent /> 添加了 100 像素的 marginLeft？是的，但看下 React Native V0.73（左边）的输出。它显示右边有 100 像素的边距（而不是左边）！！现在看下 React Native V0.74（右边）的输出。很好，在 V0.74 中，我们看到左边有了完美的 100 像素边距，并且两个 <Child /> 组件也被反转了