什么是 Yoga-Layout？
Yoga-Layout 是 Facebook 出品的一款用于布局的 JavaScript 框架。它实现了 Flexbox 布局，并且支持二维布局和对齐，可以用于构建跨平台的用户界面。Yoga 其实是 Yogi 中的一个单独的布局引擎，其被 iOS 和 Android 上 UIKit UI 构建的 React Native 引擎所使用。
安装
要使用 Yoga-Layout，需要在项目中安装它。可以选择使用 npm 进行安装：
npm install yoga-layout
常用方法
以下是 Yoga-Layout 常用的方法：
createNode()
创建一个新的布局节点，该节点具有默认属性（flex: 0）。
const node = Yoga.Node.create();
getComputedLayout()
在测量和布局后，调用此方法以获取节点的计算布局。
const computedLayout = node.getComputedLayout();
set*()
在节点上设置属性，如 width，height，margin，padding，border 等。
node.setWidth(100); node.setHeight(100); node.setMargin(Yoga.EDGE_ALL, 16);
setDisplay()
设置节点的显示类型。
Yoga.DISPLAY_FLEX：该节点是一个弹性容器并且带有伸缩项目。Yoga.DISPLAY_NONE：该节点不进行任何布局或绘制。
node.setDisplay(Yoga.DISPLAY_FLEX);
insertChild()
将一个子节点插入目标节点。
parent.insertChild(child, index);
calculateLayout()
在布局树中计算出节点的布局。
node.calculateLayout(width, height, direction);
free()
释放一个节点及其所有子节点的内存。
node.free();
布局
在 Yoga-Layout 中，Flexbox 是最常用的布局模式。以下是一些基本的 Flexbox 属性：
flexDirection
指定主轴的方向。
Yoga.FLEX_DIRECTION_ROW：默认值，水平方向（从左到右）。Yoga.FLEX_DIRECTION_ROW_REVERSE：水平方向（从右到左）。Yoga.FLEX_DIRECTION_COLUMN：竖直方向（从上到下）。Yoga.FLEX_DIRECTION_COLUMN_REVERSE：竖直方向（从下到上）。
justifyContent
定义了项目在主轴上的对齐方式。
Yoga.JUSTIFY_FLEX_START：默认值，左对齐。Yoga.JUSTIFY_FLEX_END：右对齐。Yoga.JUSTIFY_CENTER：居中。Yoga.JUSTIFY_SPACE_BETWEEN：两端对齐，项目之间的间隔都相等。Yoga.JUSTIFY_SPACE_AROUND：每个项目两侧的间隔相等。
alignItems
定义了项目在交叉轴上如何对齐。
Yoga.ALIGN_AUTO：默认值，拉伸。Yoga.ALIGN_FLEX_START：左对齐。Yoga.ALIGN_CENTER：居中。Yoga.ALIGN_FLEX_END：右对齐。Yoga.ALIGN_STRETCH：拉伸。
flexWrap
定义子节点是否应该被强制换行。
Yoga.WRAP_NO_WRAP：默认值，不强制换行。Yoga.WRAP_WRAP：强制换行。Yoga.WRAP_WRAP_REVERSE：强制换行且反转行序。
示例代码
以下是一个布局的示例代码：
-- -------------------- ---- ------- ----- ---- - ----------------------- ----- ------ - ------------------- --------------------- ---------------------- ---------------------------------------------------- ---------------------------------------------- ---------------------------------------- ----------------------------------- ----- ------ - ------------------- --------------------- ---------------------- ------------------------------- ---- ----- ------ - ------------------- --------------------- ---------------------- ------------------------------- ---- -------------------------- --- -------------------------- --- -------------------------------------- --------------- -------------------- --------------------------------------------- -------------------------------------------- --------------------------------------------- --------------------------------------------
这个示例中，我们创建了一个主容器，它是一个竖直方向的 Flexbox 布局，通过 setJustifyContent 和 setAlignItems 方法将子元素水平和竖直居中。然后我们向容器中添加了两个子节点，它们分别是两个正方形 div 元素。最后，我们调用 calculateLayout()方法来计算所有布局，并输出子元素的位置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3381dedbf7be33b2566dfa