异常现象:

当RNApp的参数appKey与RN工程中AppRegistry.registerComponent注册的appName不一致时,会导致‌应用无法正常启动‌。

核心问题:

appKey和appName必须完全一致,否则React Native无法找到并加载对应的应用组件。‌应用启动失败‌:系统尝试通过appKey查找对应的JavaScript入口组件时,会因找不到匹配项而报错,应用界面保持空白或显示加载错误。

Uncaught Error
"AwesomeProject" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong
folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and AppRegistry.registerComponent’ wasn't called.

请添加图片描述

原理分析:

每一个应用程序的运行都需要有一个入口文件或者入口函数,而在React Native 中,AppRegistry是RN应用的入口函数。AppRegistry负责注册运行React Native应用程序的JaveScript入口,程序入口组件使用AppRegistry.registerComponent来注册。当注册完应用程序组件后,Native系统(OC)就会加载jsbundle文件并触发AppRegistry.runApplication运行应用。AppRegistry接口有以下方法:

  • 系统自动创建了一个组件叫做Allen, 然后这个组件会被AppRegistry 这个API的注册函数显示出来。

  • 带引号的这个“Allen”代表的是这个APP的名称, 后面的Allen代表的是所要显示的组件名称, 那么我们就可以再创建一个xxx.js文件 (在react-native中一个文件也是一个组件), 然后我们就可以将这个组件注册到这里来, 则可以显示这个js所呈现的内容。

注意:注册的组件只是注册一次,与组件名称无关,和文件组件名称有关!


正确配置示例:

在RN工程中注册组件:

AppRegistry.registerComponent('MyApp', () => App);

在OpenHarmony原生代码中调用时:

// appKey必须与注册的appName完全一致
const appKey = 'MyApp';

立即检查建议:

打开你的RN项目,确认AppRegistry.registerComponent的第一个参数与RNApp调用时传入的appKey值是否完全相同,包括大小写。


修改建议:

修改文件比较繁杂,其实每一步都有它的道理,我们也可以通过 AI 对话去了解,我个人的理解是做这些操作其实都是按照 RN 的跨平台设计来处理的。RNApp的参数appKey需要与RN工程中AppRegistry.registerComponent注册的appName保持一致,否则会导致白屏。确保 DevEcho Studio 中没有明显报错再运行。


解决方案:

RNApp的参数appKey需要与RN工程中AppRegistry.registerComponent注册的appName保持一致。

请添加图片描述

请添加图片描述

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐