一、创作背景
我最近开发鸿蒙的时候碰到一个很奇怪的问题，在这里给大家分享一下。如果后面大家也碰到类似的问题，可以作为修改参考。
二、问题描述
RN鸿蒙端开发的时候，可能碰到调试时和正式发版时展示效果不一致的情况。
我这里有一段最简单的JS代码，只有一个View和一个Text，具体代码如下：
这代码简单得不能再简单了，我们使用npm run dev的方式打出来bundle包，然后在鸿蒙原生这边使用这个bundle包，最后的效果为：
这个效果和我预想中的结果是OK的，接下来咱们换一种运行方式，使用npm run start的方式打开RN服务端，然后使用metro的方式加载这个bundle包。意外出现了，结果如下图：
大家可以很明显的看到，同一套RN代码，在打包后再使用时是正常的，但是使用metro热加载时，上方字体变小了。
这个问题让我也很困惑，在非鸿蒙端运行RN的时候从未碰到过这种问题，于是我请教了鸿蒙的官方技术人员，官方的答复如下：
开发者您好，这边找到之前有遇到过一个类似的问题，是使用了RNAbility的项目，在使用 Metro 服务加载 RN 页面时字体变小，加载本地 bundle 时，字体显示正常。
原因是从5.0.0.500版本新增了 fontSizeScale 参数，对应原生中的 fontSizeScale，表示字体大小缩放比例，取值范围：0~3.2，默认值为1，分析原因后发现都是因为加载 bundle 太早或者说创建 RNInstancesCoordinator 太晚导致的。CPP 侧拿到 fontScale 值是通过 RNInstancesCoordinator 的 fontSizeScale 传递的，如果 RNInstancesCoordinator 创建过晚，提前加载了 RN 页面，CPP 侧渲染时的 fontScale 将为 0，而正常大小值是 1，所以导致了字体显示明显变小。
通过分析这个开发者的代码发现是在 onWindowStageCreate 中执行了预加载 Metro bundle 的操作，加载 Metro 的时候，RNOH 的 CPP 侧还未拿到 RNInstancesCoordinator 传递的 fontScale 默认值，所以出现了 Metro 服务加载的 RN 页面字体变小。解决方案是将预加载 Metro bundle 的代码延迟到首页面中执行。
按照官方的说法，是因为onWindowStageCreate()中预加载了bundle。所以要修复metro调试时字体变小的问题，这里要把onWindowStageCreate()去掉，只保留getPagePath()即可。
三、本文总结
本文中我分享了RN鸿蒙端开发过程中遇到的一个调试的坑点，以最简单DEMO的形式给大家分享出来，并且给出了解决方案，希望对大家有所帮助。文中如果有错误的地方，也希望大家可以指出来一起探讨。
本人后续有空的话会分享更多鸿蒙开发过程中的经验，感兴趣的家人们可以点赞关注一下，第一时间互相学习，一起进步。
标签：原生,鸿蒙,Metro,代码,bundle,RN,加载 From： https://www.cnblogs.com/foodie/p/18595968