导读：近几年，随着软件开发的革新，在前端基础之上衍生出了大前端概念，通俗的讲就是所有UI统称大前端，如H5、android、ios。这一切的变革，其实都是为了提高生产力，各大科技巨头在这方面做了大量研究，输出了大量的开源框架及工具。本文讲来讲下跨平台flex引擎yogalayout，帮助读者全面的了解下她，最好能够用在自己的项目上。

使用场景

yogalayout是一个通用flex排版框架，支持了android、iOS、javascript。下面的场景，我相信很多人都或多或少用到过。

1. react native：这个框架，我相信大家都不陌生，好多人都使用过。没错，她的布局引擎就是用的yogalayout
2. Componentkit：这个是受React的启发，使用yogalayout作为底层实现的iOS UI框架
3. Litho：这个是受React的启发，使用yogalayout作为底层实现的android声明式UI框架

为什么是yogalayout

在13年左右，React开始诞生后，facebook就在为react的通用做准备。由于flex布局的便捷和流行，因此yogalayout诞生了(14年)，随着yogalayout的成熟，react native应运而生，逐渐支持了ios、android，我记得当时15、16年，react native市场的火爆，很多培训视频在网上流传，引发了学习热潮，不亚于目前的flutter学习热潮。

特性

那么究竟yoga实现了什么呢，我们来一起看下他的特性(学过web的flex布局，应该很好理解)

1. position：相对于父元素的位置
   1. RELATIVE：默认布局，即默认按照正常的布局流
   2. ABSOLUTE：绝对布局，必须配合top, right, bottom, left使用
2. Align Content：内容对齐方式(垂直)
   1. FLEX START (DEFAULT)： 容器横轴的起点(最左端)
   2. FLEX END：容器横轴的末端(最右端)
   3. STRETCH：自动拉伸横轴所在的高度
   4. CENTER：容器横轴的中心
   5. SPACE BETWEEN：容器两端平均剩余空间
   6. SPACE AROUND：容器均匀留白
3. Align Items：对齐项
   1. STRETCH (DEFAULT) ：同上
   2. FLEX START：同上
   3. FLEX END ：同上
   4. CENTER：同上
   5. BASELINE：与容器的儿子在同一基准线上
4. Align Self：自己对齐，同Align Items
5. Aspect Ratio：纵横比
6. Flex Direction：flex布局方向
   1. ROW：按行排列
   2. COLUMN：按列排列
   3. ROW REVERSE：按行从右到左排列
   4. COLUMN REVERSE：按列从下往上排列
7. Flex Wrap：flex换行方式
8. Justify Content：内容对齐方式(水平)，同Align Content
9. Margins, Paddings, and Borders：常规的边距设置

因为是flex引擎，所以常用的flex属性这里都做了支持。

下面我们来看看具体案例

实际案例

• Litho

final ComponentContext c = new ComponentContext(this);final Component component = Text.create(c)  .text("Hello World")  .textSizeDip(50)  .build();setContentView(LithoView.create(c, component));

• React Native

import React from 'react';import { Text, View } from 'react-native';export default function YourApp() {  return (            Try editing me!         );}

总结

yogalayout是facebook实现的引擎，从14年开始一直不断的维护，我从android开发到ios开发，在到react开发，一路过来感受到了flex的强大与便捷，最近我还在思考，是否能够让android、ios有react的开发体验(当然除了Jetpack Compose、Swift UI)，接下来我打算用yoga做个尝试，有兴趣的可以一起交流交流。