鸿蒙系统支持reactnative,鸿蒙开源三方组件--跨平台自适应布局yoga组件

介绍

yoga是facebook打造的一个跨IOS、Android、Window平台在内的布局引擎，兼容Flexbox布局方式，让界面更加简单。

Yoga官网：https://facebook.github.io/yoga/

官网上描述的特性包括：

完全兼容Flexbox布局，遵循W3C的规范

支持java、C#、Objective-C、C四种语言

底层代码使用C语言编写，性能不是问题

支持流行框架如React Native

目前在已开源的鸿蒙组件(https://gitee.com/openharmony-tpc/yoga)的功能现状如下：

native层和接口已经打通

支持自定义xml属性来控制布局(通过YogaLayout)

设置布局中不支持Image控件(onDrawCanvas暂不支持主动回调，所以yoga没办法扫描到它)，请使用Text控件替代

不支持VirtualYogaLayout

如何使用

首先我们在MainAbility中定义界面路由。

publicclass MainAbility extends Ability {

@Override

publicvoid onStart(Intent intent) {

super.onStart(intent);

super.setMainRoute(MainAbilitySlice.class.getName());

addActionRoute("action.dydrawnode.slice", DynamicsDrawNodeSlice.class.getName());

addActionRoute("action.showrow.slice", ShowRowAbilitySlice.class.getName());

addActionRoute("action.inflate.slice", BenchmarkInflateAbilitySlice.class.getName());

}

}

然后我们来到MainAbilitySlice,其实就是做了一个向其他界面跳转的动作，并提前加载yoga的so库。

publicclass MainAbilitySlice extends AbilitySlice {

static{

System.loadLibrary("yoga");

System.loadLibrary("yogacore");

System.loadLibrary("fb");

}

@Override

publicvoid onStart(Intent intent) {

super.onStart(intent);

setUIContent(ResourceTable.Layout_main_layout);

Button btn0= (Button) findComponentById(ResourceTable.Id_btn_1);

btn0.setClickedListener(component -> {

Intent intent1 = new Intent();

Operation operation = new Intent.OperationBuilder()

.withAction("action.dydrawnode.slice")

.build();

intent1.setOperation(operation);

startAbilityForResult(intent1, 1);

});

Button btn2= (Button) findComponentById(ResourceTable.Id_btn_2);

btn2.setClickedListener(component -> {

Intent intent1 = new Intent();

Operation operation = new Intent.OperationBuilder()

.withAction("action.showrow.slice")

.build();

intent1.setOperation(operation);

startAbilityForResult(intent1, 1);

});

Button btn1= (Button) findComponentById(ResourceTable.Id_btn_3);

btn1.setClickedListener(component -> {

Intent intent1 = new Intent();

Operation operation = new Intent.OperationBuilder()

.withA