# ReactNativeWebViewLoadHTML

**Repository Path**: scenario-samples/react-native-web-view-load-html

## Basic Information

- **Project Name**: ReactNativeWebViewLoadHTML
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-04
- **Last Updated**: 2026-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 场景介绍

在现代移动应用开发中，react-native-webview组件作为连接React Native应用与Web技术的桥梁，在多种业务场景中发挥着重要作用。尤其是在需要展示动态内容、集成第三方服务或实现复杂交互界面时，WebView提供了灵活高效的解决方案。

## 效果预览

![html.gif](./screentshots/html.gif)

## 实现思路
- react-native-webview加载本地HTML文件的不同方式：
  ```js
  const [webViewSource, setWebViewSource] = useState({ html:htmlContent });
  ```
   - 直接加载HTML字符串时，需要显式定义HTML内容，并设置source={html:htmlContent}：
  ```js
    const htmlContent = `HTML文件内容`;
    const loadHTMLContent = () => {
      setWebViewSource({ html: htmlContent });
    };
    ```
  - 加载React Native侧的目录中的HTML时，将HTML文件放在React Native侧的目录中，设置source={require('./xxx/xxx.html')}：
  ```js
    const loadRNAssetsFile = () => {
      let rnAssetsfilePath =require('./assets/rn-assets.html');
      setWebViewSource(rnAssetsfilePath);
    };
  ```
  - 加载HarmonyOS侧的rawfile目录中的HTML时，将HTML文件放在HarmonyOS侧的rawfile目录中，设置source={uri:resource://rawfile/xxx.html}：
  ```js
  const loadRawFile = () => {
    let rawfilePath ='resource://rawfile/rawfile_test.html';
    setWebViewSource({uri:rawfilePath});
  };
  ```
  - 加载沙箱目录中的HTML时，将HTML文件放在应用的沙箱目录的files目录中，设置source={uri:file:///data/storage/el2/base/haps/entry/files/xxx.html}：
  ```js
  const loadSandboxFile = () => {
    let sandboxPath = 'file:///data/storage/el2/base/haps/entry/files/sandbox.html';
    setWebViewSource({ uri: sandboxPath });
  };
  ```
  - 设置完成source源后加载HTML：
  ```js
  <WebView
   key={currentMode} // key属性，用于标识组件的唯一性。
   ref={webViewRef} // 创建对WebView实例的引用，可以通过webViewRef.current访问WebView的方法和属性。
   style={styles.webview} // 设置WebView的样式。
   source={webViewSource} // 指定WebView加载的内容来源
   originWhitelist={['*']} // 设置允许的URL来源白名单，['*']表示允许所有来源。
   javaScriptEnabled={true} // 启用或禁用JavaScript执行。
   domStorageEnabled={true} // 启用DOM Storage（localStorage和sessionStorage）。
   startInLoadingState={true} // 初始加载时是否显示加载状态。
   onMessage={onWebViewMessage} // 处理从HTML页面发送到React Native的消息。
   onLoadStart={() => addLog('开始加载')} // 页面开始加载时触发。
   onLoadEnd={() => addLog('加载完成')} // 页面加载完成时触发（无论成功或失败）。
   onError={(event) => {}} // 页面加载失败时触发。
   onHttpError={(event) => { addLog('HTTP错误');}} // HTTP错误时触发。
  />
  ```
- HTML页面与React Native通信：
  - React Native侧接收来自HTML页面的消息：
  ```js
  const onWebViewMessage = (event) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);
      console.info('RN收到消息:', data);
      // 接收HTML发送的消息（type:FROM_H5）
      if (data.type === 'FROM_H5') {
        addLog(`收到HTML消息: ${data.data || data.message}`);
        Alert.alert('HTML消息', data.data || data.message);
      }
      // 接收页面加载完成消息
      else if (data.type === 'PAGE_LOADED') {
        addLog(`${data.page}页面加载完成`);
      }
    } catch (error) {
      console.info('RN收到原始消息:', event.nativeEvent.data);
    }
  };
  ```
  - React Native向HTML发送消息：

  ```js
  const sendMessageToH5 = () => {
    const message = {
      type: 'FROM_RN',  
      data: {
        message: `Hello from RN @ ${new Date().toTimeString().split(' ')[0]}`,
        timestamp: Date.now(),
        platform: Platform.OS
      }
    };

    // 方式1：使用postMessage
    webViewRef.current?.postMessage(JSON.stringify(message));
    
    // 方式2：使用injectJavaScript
    webViewRef.current?.injectJavaScript(`
      if (typeof window.receiveRNMessage === 'function') {
        window.receiveRNMessage(${JSON.stringify(message)});
      }
    `);
    
    addLog('发送消息到HTML');
  };
  ```
- WebView加载JavaScript和CSS资源文件时，同时设置javaScriptEnabled、allowFileAccess、domStorageEnabled为true：
```js
allowFileAccess={true} // 解除对本地文件的访问限制，允许加载同目录或指定路径的JS/CSS文件。
javaScriptEnabled={true} // 确保JS代码能够执行，否则即使文件加载成功，代码也无法运行。
domStorageEnabled={true} // 不直接控制资源加载，但确保JS代码运行时所需的存储功能，避免因存储缺失导致的逻辑错误。
```


## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。
- 本示例使用0.77.33版本RNOH。
- 本示例使用13.15.1版本react-native-ohos/react-native-webview。

## 工程目录

```
ReactNativeWebViewLoadHTML                             // RN工程
├──harmony                                             // harmony工程
│  ├──entry/src/main/cpp                               // native相关配置
│  │  ├──generated                                     // codegen自动生成的桥接代码
│  │  │   └──RNOHGeneratedPackage.h              
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src
│  │        ├──main/ets
│  │        │       ├──entryability
│  │        │       │  └──EntryAbility.ets
│  │        │       ├──pages
│  │        │       │  └──Index.ets                    // Harmony侧入口
│  │        │       └──RNPackagesFactory.ets
│  │        └──module.json5                        
│  └──entry/src/main/resources/rawfile 
│                                ├──rawfile_test.html // HarmonyOS侧rawfile测试HTML
│                                ├──style.css         // CSS测试HTML
│                                └──sandbox.html       // 沙箱目录测试HTML
├──App.tsx                                            // WebView加载本地HTML实现
├──assets
│  ├──communication-test.html                         // 通信测试HTML
│  └──rn-assets.html                                  // RN侧require测试HTML
├──index.js                                           // 入口文件
├──metro.config.js                                    // 打包配置
```
## 参考文档

[RNOH使用文档](https://gitcode.com/openharmony-sig/ohos_react_native/blob/tag_0.77.33/README.md)

[react-native-ohos/react-native-webview](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-webview.md)