React Native | 初代渲染器

React Native 初代渲染器称为 Yoga，它负责计算组件的布局。在 React Native 中，Yoga 是一个用 C++ 编写的库，它被编译为多个平台的原生代码。

以下是一个简单的例子，展示如何在 JavaScript 中使用 Yoga 布局：

import { Yoga } from 'react-native';
 
// 创建一个节点
const node = Yoga.Node.create();
 
// 设置宽度为100点
node.setWidth(100);
 
// 设置高度为100点
node.setHeight(100);
 
// 将节点设置为flex: 1，并在容器中居中
node.setFlex(1);
node.setJustifyContent(Yoga.JUSTIFY_CENTER);
node.setAlignItems(Yoga.ALIGN_CENTER);
 
// 将节点布局计算完成
node.calculateLayout();
 
// 获取布局后的位置和尺寸
const layout = {
  left: node.getComputedLeft(),
  top: node.getComputedTop(),
  width: node.getComputedWidth(),
  height: node.getComputedHeight()
};
 
// 输出布局信息
console.log(layout);
 
// 清理节点
node.free();

请注意，Yoga 不是直接与用户界面交互的库，它只负责布局计算。实际的渲染通常是通过其他库，如 react-native-renderer 或 Fabric，来完成的。上面的代码只是展示了如何使用 Yoga 进行布局计算。