React Native Webview加载本地HTML及JS文件问题求助

阿华AIGC实验室

2026-5-14

解决React Native 0.60.5 WebView加载本地HTML+Highcharts的问题

我之前在RN0.60.x版本里也踩过这个坑，尤其是iOS端的文件路径问题特别头疼，给你一套亲测有效的方案：

第一步：整理本地文件结构

先在项目根目录新建一个html文件夹，把你的本地HTML文件（比如chart.html）和Highcharts的JS文件（比如highcharts.js）都放进去。结构大概是这样：

你的RN项目/
├── html/
│   ├── chart.html
│   └── highcharts.js
├── ios/
├── android/
└── ...其他文件

第二步：配置HTML文件（关键！）

在chart.html里正确引入本地的highcharts.js，注意路径写法，还要确保Highcharts能正常初始化：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Demo</title>
    <!-- 这里的路径要和后面WebView的配置对应 -->
    <script src="highcharts.js"></script>
</head>
<body>
    <div id="container" style="width:100%; height:400px;"></div>
    <script>
        // 初始化Highcharts图表
        Highcharts.chart('container', {
            title: {
                text: '月度销售数据'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月']
            },
            series: [{
                name: '销售额',
                data: [120, 150, 180, 160, 200]
            }]
        });
    </script>
</body>
</html>

第三步：React Native WebView组件配置

在你的RN组件里，这样写WebView，重点是处理iOS和Android的不同路径，以及解决iOS的Domain Not Found错误：

import React from 'react';
import { WebView, Platform } from 'react-native';

const LocalChartWebView = () => {
  // 根据平台拼接本地文件路径
  const htmlPath = Platform.select({
    ios: require('./html/chart.html'),
    android: 'file:///android_asset/html/chart.html'
  });

  return (
    <WebView
      source={htmlPath}
      // iOS必须开启这个属性才能访问本地文件
      allowFileAccess={true}
      // 允许执行JS
      javaScriptEnabled={true}
      // 开启DOM存储（Highcharts可能需要）
      domStorageEnabled={true}
      // 解决iOS可能出现的加载错误
      onError={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        console.warn('WebView加载错误:', nativeEvent);
      }}
    />
  );
};

export default LocalChartWebView;

第四步：Android端额外配置

因为Android需要把html文件夹放到android/app/src/main/assets目录下（如果没有assets文件夹就新建一个），所以你需要把根目录的html文件夹复制过去，最终Android的路径是：
android/app/src/main/assets/html/
这样WebView里的file:///android_asset/html/chart.html才能正确访问。

解决iOS的Domain Not Found -1100错误

这个错误通常是因为路径引用不正确，或者没有正确使用require加载本地HTML。在RN0.60.5的iOS端，直接用require引入本地HTML文件是最可靠的方式，不要用file://路径，否则容易出现域名找不到的问题。另外，确保你的html文件夹里的文件都被正确打包到iOS项目中——如果Xcode里没有显示这些文件，你需要手动把html文件夹拖到Xcode的项目导航栏里，选择“Create groups”并勾选“Add to targets”。

注意事项

不要用CDN引入Highcharts，既然要本地加载，就把完整的highcharts.js文件放到html文件夹里（可以从Highcharts官网下载）。
如果需要引入Highcharts的其他模块（比如导出模块），直接把对应的JS文件也放到html文件夹里，然后在HTML里按顺序引入即可。
测试前先清理iOS和Android的缓存，比如iOS用Xcode清理build，Android用./gradlew clean。

内容的提问来源于stack exchange，提问作者mukesh.kumar