openGauss Summit 2025：技术演进深度解析

Source: InfoQ - Frontend

Original

本文原创发布在华为开发者联盟社区，欢迎前往与更多开发者进行互动。更多相关问题可点击原帖进行交流：使用React Native开发HarmonyOS应用TOP问题集锦 。

React Native框架是一个基于JavaScript与React的开源框架，主要用于开发原生渲染的移动应用程序。React Native for OpenHarmony（RNOH）在React Native原有能力之上，进行了深度的鸿蒙化适配与扩展，使开发者能够基于熟悉的React技术栈，高效地构建适用于HarmonyOS的应用程序。 为助力扫清React Native开发HarmonyOS的Top开发障碍，本文选取了社区热点问题，进行深入剖析，推出《React Native开发HarmonyOS应用热点问题集》专栏，旨在集中解决共性问题，希望能提供有价值的参考，助力大家在鸿蒙开发之路上行得更稳、更远，后续将持续更新，欢迎大家提出宝贵建议。

HarmonyOS化方案

从零开始在HarmonyOS上开发RN应用

已有RN工程如何快速迁移到HarmonyOS上

RNOH如何升级到指定版本。

环境配置与开发调试常见问题

如何使用React Native DevTools进行断点调试。

RN工程调试阶段如何热更新。

RN创建工程时报错。

React-native-dotenv插件对应的.env配置修改后不生效。

如何解决RN三方库引入时ohpm安装报错问题。

RN与HarmonyOS混合开发常见问题

TurboModule常见问题

TurboModule的创建流程及常见问题。

TurboModule继承类中如何获取UIContext。

自定义组件常见问题

如何使用CodeGen生成粘合代码来实现RN自定义HarmonyOS组件。

RN与HarmonyOS交互常见问题

RN和ArkTS字体颜色显示不一致。

如何解决ArkUI Swiper组件滑动事件与RN组件点击事件冲突。

RN工程加载rawfile下bundle不显示本地图片。

RN混合开发如何处理手势返回事件。

三方库使用常见问题

RN三方库适配常见问题。

RN导入三方库提示找不到对应模块。

图片处理

在RN项目中如何使用react-native-svg三方库加载图片？

使用react-native-view-shot截图，如何将截图保存到图库？

权限使用

如何在RN中申请并验证相机ACL权限。

二维码

使用react-native-qrcode-svg生成二维码生成失败。

地图

react-native-amap3d的Marker组件的icon属性不生效。

常用UI

列表页面添加水印后，列表无法滑动。

react-native-webview常见问题

RN webview加载页面白屏。

react-native-webview注入message事件监听不生效。

RN使用Webview无法加载JS、CSS文件。

如何解决RNWebView跳转系统电话页面时出现空白页面问题？

HarmonyOS RN使用webview打开web页面如何下载页面上的附件？

RNOH项目中web请求如何设置自定义userAgent？

RN中WebView如何开启调试。

编译构建常见问题

RN编译报错error: undefined symbol。

RN打包时解析模块出错。

Bundle常见问题

RN如何实现多Bundle打包。

RN如何加载bundle包。

RN Release包常见问题

RN适配HarmonyOS应用工程如何使用release包。

集成ReactNative Release版本时报错找不到RNOHOther.cpp文件。

RN打Release包，如何隐藏掉Warning提示框。

编译HBC指导

如何编译HBC。

应用运行常见问题

RN项目打包成功，一运行就闪退。

RN应用在切后台后再切前台，应用闪退。

RNAbility里的onBackground内setTimeout不执行。

不使用RNAbility运行RN工程失败。

性能调优

编译优化

字节码（HBC）

TurboModule运行在子线程

渲染优化方法

预加载

组件性能调优

常见功能实现

RN路由如何实现？

RN页面如何防截图和录屏？

如何使用代码刷新RN页面？

RN如何加载指定页面？

如何在RN侧的两个页面中实现事件发送及接收？

RNOH应用如何使用Image加载图片？

RN实现监听键盘状态和高度。

RN如何跳转到应用市场？

RN侧怎么获取设备相关信息？