如何在React Native的iOS端展示本地Web代码？已尝试多种方法未果

方法1：直接加载本地HTML文件（适合简单单页） #

1. 在React Native项目根目录创建local-web文件夹，放入你的index.html及关联的CSS/JS/图片资源，确保所有资源引用使用相对路径（比如./style.css）。
2. 打开Xcode，将local-web文件夹拖入你的iOS项目（比如拖到项目根目录），勾选：
   • "Copy items if needed"
   • "Add to targets" 选择你的主App Target
3. 在React Native组件中使用WebView加载：

   import { WebView } from 'react-native-webview';
   import { Platform } from 'react-native';
   
   const LocalWebScreen = () => {
     return (
       <WebView
         source={Platform.OS === 'ios' ? { uri: 'local-web/index.html' } : {}}
         style={{ flex: 1 }}
       />
     );
   };
   
   export default LocalWebScreen;
   

方法2：打包Web项目后集成（适合Vue/React等单页应用） #

如果你的本地Web代码是完整的前端项目：

1. 先执行Web项目的构建命令（比如npm run build），生成dist（或build）文件夹。
2. 将dist文件夹拖入Xcode项目，同样勾选复制和添加到目标。
3. 调整WebView的加载路径：

   import { WebView } from 'react-native-webview';
   import { Platform } from 'react-native';
   
   const BundledWebScreen = () => {
     return (
       <WebView
         source={Platform.OS === 'ios' ? { uri: 'dist/index.html' } : {}}
         style={{ flex: 1 }}
         javaScriptEnabled={true}
         domStorageEnabled={true}
       />
     );
   };
   
   export default BundledWebScreen;
   

方法3：直接嵌入HTML字符串（适合极简内容） #

如果只是少量HTML代码，无需额外资源，可以直接传入html属性：

import { WebView } from 'react-native-webview';

const InlineWebScreen = () => {
  return (
    <WebView
      html={`
        <html>
          <head>
            <style>body { background: #f0f0f0; padding: 20px; }</style>
          </head>
          <body>
            <h2>内嵌本地Web内容</h2>
            <script>console.log('Loaded from inline HTML')</script>
          </body>
        </html>
      `}
      style={{ flex: 1 }}
    />
  );
};

export default InlineWebScreen;

常见问题排查 #

• 路径错误：iOS对文件路径大小写敏感，确保代码中的路径和实际文件名完全一致（比如Index.html和index.html是两个不同文件）。
• 资源未打包：检查Xcode中目标的"Build Phases" -> "Copy Bundle Resources"，确认你的本地Web文件夹/文件在列表中。
• 权限问题：如果本地Web代码需要发起网络请求，在Info.plist中配置NSAppTransportSecurity（允许HTTP请求）或NSAllowsArbitraryLoads（按需开启）。
• JS执行失败：确保WebView开启了javaScriptEnabled={true}和domStorageEnabled={true}（如果需要本地存储）。

内容的提问来源于stack exchange，提问作者Sahdev Domadiya