【鸿蒙优选三方库】@react-native-ohos/react-native-webview：高性能内嵌浏览器组件
·
【鸿蒙优选三方库】@react-native-ohos/react-native-webview：高性能内嵌浏览器组件> RN 鸿蒙应用里要嵌入 H5 页面、实现 RN 与 Web 双向通信？@react-native-ohos/react-native-webview 基于 react-native-webview 适配，完整 WebView 能力 + JS 注入 + 消息通信，混合开发首选。- 包名：@react-native-ohos/react-native-webview- 当前版本：~13.16.x- 协议：MIT- 安装：npm install @react-native-ohos/react-native-webview- 仓库：https://gitcode.com/CPF-RN/rntpc_react-native-webview—## 一、它解决了什么问题？RN 应用里经常需要嵌入 Web 内容：- 活动页/H5 营销页：运营频繁改，用 H5 比 RN 热更新方便- 第三方页面：支付回调、OAuth 授权、外部链接- 富文本内容：文章详情、用户协议等 HTML 内容- 既有 Web 资产复用：已投入大量开发成本的 Web 页面直接嵌入RN 自带没有内嵌浏览器的标准方案。react-native-webview 提供了完整的 WebView 组件——加载 URL/HTML、JS 注入、双向消息通信、Cookie 管理、文件上传下载、自定义 UA，是 RN 混合开发的事实标准。—## 二、核心特点| 特性 | 说明 ||------|------|| 加载 URL/HTML | source={{ uri }} 或 source={{ html }} || JS 注入 | injectJavaScript() 向 Web 注入任意 JS 代码 || 双向通信 | postMessage() / onMessage 实现 RN ↔ Web 双向通信 || Cookie 管理 | 可设置/读取 Cookie，保持登录态 || 文件上传 | Web 端 <input type="file"> 触发原生文件选择 || 自定义 UA | userAgent 属性自定义 User-Agent || 导航控制 | onNavigationStateChange 拦截跳转 || 滚动控制 | scrollEnabled / bounces 可控制 || 兼容 API20+ | 鸿蒙 API 20+ 全适配 |—## 三、适用场景- 混合开发：核心页用 RN，活动/营销页用 H5。- 文章详情/富文本：CMS 输出的 HTML 内容直接渲染。- 支付/OAuth 回调：第三方支付页面、登录授权。- Web 应用壳：整个 App 就是套了一个 WebView 的 Web 应用。- 第三方页面嵌入：外部链接、文档、帮助中心。- 既有 Web 迁移：渐进式把 Web 页面迁移到 RN，过渡期用 WebView。—## 四、快速上手### 1. 安装bashnpm install @react-native-ohos/react-native-webview### 2. 基础使用tsximport { WebView } from '@react-native-ohos/react-native-webview'<WebView source={{ uri: 'https://example.com' }} style={{ flex: 1 }}/>### 3. 加载 HTML 字符串tsx<WebView source={{ html: ` <html> <body> <h1>Hello WebView</h1> <p>这是内嵌的 HTML 内容</p> </body> </html> `, }} style={{ flex: 1 }}/>### 4. RN ↔ Web 双向通信RN 向 Web 发消息：tsxconst webViewRef = useRef<WebView>(null)// 注入 JS 到 Web 页面webViewRef.current?.injectJavaScript(` document.body.style.backgroundColor = '#4ECDC4'; true; // 必须返回 true`)// 发送消息到 WebwebViewRef.current?.postMessage(JSON.stringify({ type: 'update', data: { name: '张三' } }))Web 页面接收消息并向 RN 回传：html<script> // 接收 RN 发来的消息 window.addEventListener('message', (e) => { const msg = JSON.parse(e.data) console.log('收到 RN 消息:', msg) }) // 向 RN 发消息 function sendToRN() { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'login_success', token: 'abc123', })) }</script>RN 接收 Web 消息：tsx<WebView ref={webViewRef} source={{ uri: 'https://example.com' }} onMessage={(e) => { const data = JSON.parse(e.nativeEvent.data) console.log('收到 Web 消息:', data) if (data.type === 'login_success') { // 处理登录成功 } }}/>### 5. 拦截导航跳转tsx<WebView source={{ uri: 'https://example.com' }} onNavigationStateChange={(navState) => { // 拦截特定 URL，用原生页面打开 if (navState.url.includes('/payment')) { // 阻止 WebView 跳转，用 RN 原生页面处理支付 return false } return true }}/>—## 五、亮点能力速览- JS 注入：injectJavaScript 可在页面加载任意阶段注入 JS，实现 UI 定制- 消息通信：postMessage + onMessage 双向通信，JSON 序列化- Cookie 同步：保持登录态跨 WebView 和 RN- 文件上传：Web 端 <input type="file"> 触发原生文件选择器- 导航拦截：onShouldStartLoadWithRequest 精确控制页面跳转—## 六、版本演进| 版本 | RN 版本 | 说明 ||------|---------|------|| ~13.16.x | 0.82/0.84 | 最新版，API20+ || ~13.15.x | 0.77 | 兼容 0.77 || ~13.10.x | 0.72 | 兼容 0.72，Autolink |—## 七、为什么值得选它？1. 混合开发标配：RN + Web 双引擎，兼顾性能与灵活性。2. 双向通信：postMessage / onMessage 让 RN 和 Web 无缝协作。3. JS 注入：可定制 Web 页面行为，比如注入 CSS 适配暗色模式。4. 导航拦截：精确控制 URL 跳转，敏感操作走原生。5. 跨平台一致：iOS/Android/鸿蒙行为统一，一套代码三端跑。如果你在 RN 鸿蒙应用里需要嵌入任何 Web 内容——@react-native-ohos/react-native-webview 是唯一的选择。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
1
0- 0
已为社区贡献56条内容
所有评论(0)