React Native WebView 组件在 HarmonyOS 项目中的集成实战

在这里插入图片描述

前言

react-native-webview 是 React Native 社区最流行的 WebView 组件，提供了一套完整的网页加载和交互解决方案。它支持加载网络 URL、本地 HTML 文件、注入 JavaScript、处理网页事件等多种功能，并且完全兼容 Android、iOS 和 HarmonyOS 三端。

库简介

基本信息

库名称: @react-native-ohos/react-native-webview
版本信息:
- 13.10.5: 支持 RN 0.72 版本
- 13.15.1: 支持 RN 0.77 版本
官方仓库: https://github.com/react-native-oh-library/react-native-webview
主要功能:
- 加载网络 URL 和本地 HTML
- 注入 JavaScript 代码
- 处理网页加载事件
- 网页与原生通信
- 支持多种配置选项
- 兼容 Android、iOS 和 HarmonyOS
兼容性验证:
- 鸿蒙化版本 13.10.4-rc.4 及之后需要 DevEco Studio 6.0.0 (API20) 及以上版本

为什么选择这个库？

功能完整: 提供完整的 WebView 功能
跨平台: 在三端提供一致的体验
易于使用: API 简单直观
性能优异: 原生实现，高效稳定
灵活配置: 支持多种配置选项

安装步骤

1. 使用 npm 安装

根据您的 RN 版本选择对应的包名：

npm install @react-native-ohos/[email protected]

2. 验证安装

安装完成后，检查 package.json 文件，应该能看到新增的依赖：

{
  "dependencies": {
    "@react-native-ohos/react-native-webview"

import React, { useRef, useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, SafeAreaView, ActivityIndicator, } from 'react-native'; import { WebView, WebViewNavigation } from 'react-native-webview'; function WebViewDemo() { const webViewRef = useRef(null); const [url, setUrl] = useState('https://reactnative.dev/'); const [canGoBack, setCanGoBack] = useState(false); const [canGoForward, setCanGoForward] = useState(false); const [loading, setLoading] = useState(false); const [currentUrl, setCurrentUrl] = useState(''); const [error, setError] = useState(null); const [progress, setProgress] = useState(0); const handleGoBack = () => { if (webViewRef.current && typeof webViewRef.current.goBack === 'function') { webViewRef.current.goBack(); } }; const handleGoForward = () => { if (webViewRef.current && typeof webViewRef.current.goForward === 'function') { webViewRef.current.goForward(); } }; const handleReload = () => { webViewRef.current?.reload(); }; const handleLoad = () => { webViewRef.current?.injectJavaScript(` (function() { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'pageInfo', title: document.title, url: window.location.href })); })(); true; `); }; const handleMessage = (event) => { try { const data = JSON.parse(event.nativeEvent.data); console.log('收到网页消息:', data); } catch (e) { console.log('收到网页消息:', event.nativeEvent.data); } }; const loadUrl = () => { if (url.trim()) { setError(null); } }; const useDefaultUrl = () => { setUrl('https://reactnative.dev/'); setError(null); }; return ( <SafeAreaView style={styles.container}> <View style={styles.container}> {/* 顶部工具栏 */} <View style={styles.toolbar}> <TouchableOpacity style={[styles.navButton, !canGoBack && styles.disabledButton]} onPress={handleGoBack} disabled={!canGoBack} > <Text style={styles.navButtonText}>←</Text> </TouchableOpacity> <TouchableOpacity style={[styles.navButton, !canGoForward && styles.disabledButton]} onPress={handleGoForward} disabled={!canGoForward} > <Text style={styles.navButtonText}>→</Text> </TouchableOpacity> <TouchableOpacity style={styles.navButton} onPress={handleReload}> <Text =>↻ 前往 {/* 进度条 */} {loading && progress > 0 && progress < 1 && ( )} {/* 错误提示 */} {error && ( {error} )} {/* WebView */} {loading && ( 加载中... )} { setCanGoBack(navState.canGoBack); setCanGoForward(navState.canGoForward); setCurrentUrl(navState.url); }} onLoadStart={() => { setLoading(true); setError(null); }} onLoadEnd={() => { setLoading(false); // 延迟执行 JavaScript 注入，确保 WebView 已完全加载 setTimeout(() => { handleLoad(); }, 100); }} onLoadProgress={({ nativeEvent }) => { setProgress(nativeEvent.progress); }} onHttpError={(syntheticEvent) => { const { nativeEvent } = syntheticEvent; setError(`HTTP 错误：${nativeEvent.statusCode}`); setLoading(false); }} onError={(syntheticEvent) => { const { nativeEvent } = syntheticEvent; setError(`加载错误：${nativeEvent.description}`); setLoading(false); }} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={` window.addEventListener('load', function() { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'loaded', timestamp: new Date().toISOString() })); }); `} ignoreSilentHardwareSwitch={true} /> {/* 当前 URL 显示 */} {currentUrl && ( 当前页面: {currentUrl} )} {/* 功能按钮 */} React Native 官网 { webViewRef.current?.injectJavaScript(` alert('这是一个来自 React Native 的注入消息！'); true; `); }} > 注入 JS { if (webViewRef.current && typeof webViewRef.current.clearCache === 'function') { webViewRef.current.clearCache(true); } }} > 清除缓存 {/* 说明 */} 功能说明： • 支持加载网络 URL 和本地 HTML 文件 • 支持注入 JavaScript 代码 • 支持网页与原生通信 • 支持前进、后退、刷新等导航功能 • 支持加载进度显示 • 支持错误处理 {/* 注意事项 */} 注意事项： • ignoreSilentHardwareSwitch 需要设置为 true，网页播放才有声音 • 需要配置网络权限才能访问网络 • 部分属性 HarmonyOS 暂不支持 • 编译需要 DevEco Studio 6.0.0(API20) 及以上版本 ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', }, toolbar: { flexDirection: 'row', alignItems: 'center', padding: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#e0e0e0', gap: 5, }, navButton: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', borderRadius: 8, }, disabledButton: { opacity: 0.3, }, navButtonText: { fontSize: 20, fontWeight: 'bold', color: '#333', }, urlInput: { flex: 1, height: 40, borderWidth: 1, borderColor: '#ddd', borderRadius: 8, paddingHorizontal: 10, backgroundColor: '#f9f9f9', fontSize: 14, }, goButton: { paddingHorizontal: 15, paddingVertical: 8, backgroundColor: '#42a5f5', borderRadius: 8, }, goButtonText: { color: '#fff', fontSize: 14, fontWeight: 'bold', }, progressBarContainer: { height: 2, backgroundColor: '#e0e0e0', }, progressBar: { height: '100%', backgroundColor: '#42a5f5', }, errorContainer: { padding: 10, backgroundColor: '#ffebee', borderBottomWidth: 1, borderBottomColor: '#ffcdd2', }, errorText: { color: '#c62828', fontSize: 14, textAlign: 'center', }, webviewContainer: { flex: 1, backgroundColor: '#fff', }, webview: { flex: 1, }, loadingContainer: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(255, 255, 255, 0.8)', }, loadingText: { marginTop: 10, fontSize: 16, color: '#666', }, urlDisplay: { padding: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#e0e0e0', }, urlLabel: { fontSize: 12, color: '#666', marginBottom: 5, }, urlText: { fontSize: 14, color: '#333', }, buttonContainer: { flexDirection: 'row', flexWrap: 'wrap', padding: 10, gap: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#e0e0e0', }, actionButton: { paddingHorizontal: 15, paddingVertical: 10, backgroundColor: '#42a5f5', borderRadius: 8, minWidth: 100, alignItems: 'center', }, actionButtonText: { color: '#fff', fontSize: 14, fontWeight: '500', }, infoSection: { margin: 10, padding: 15, backgroundColor: '#e3f2fd', borderRadius: 8, borderLeftWidth: 4, borderLeftColor: '#42a5f5', }, infoTitle: { fontSize: 14, fontWeight: 'bold', marginBottom: 8, color: '#1565c0', }, infoText: { fontSize: 13, color: '#1976d2', marginBottom: 4, }, noteSection: { margin: 10, padding: 15, backgroundColor: '#fff3cd', borderRadius: 8, borderLeftWidth: 4, borderLeftColor: '#ffc107', }, noteTitle: { fontSize: 14, fontWeight: 'bold', marginBottom: 8, color: '#856404', }, noteText: { fontSize: 13, color: '#856404', marginBottom: 4, }, }); export default WebViewDemo;

特性	原生 WebView	react-native-webview
跨平台一致性	❌	✅ 完全一致
API 简洁性	⚠️ 复杂	✅ 简洁
JavaScript 注入	✅ 支持	✅ 支持
网页通信	⚠️ 复杂	✅ 简单
导航控制	✅ 完整	✅ 完整
缓存管理	✅ 完整	✅ 完整

React Native WebView 组件在 HarmonyOS 项目中的集成实战