React Native中iOS平台如何访问资源文件？（WebView加载HTML场景）

步骤1：添加资源到iOS项目 #

• 将你的.html文件及关联的css、js、图片等资源，直接拖入Xcode项目的ios/{你的项目名称}目录下。
• 弹出的配置窗口中，勾选Copy items if needed，并在Add to targets里选中你的主项目target。

步骤2：确认资源打包配置 #

• 在Xcode中选中项目target，切换到Build Phases标签页。
• 找到Copy Bundle Resources列表，确保所有需要加载的本地资源（html、css等）都在其中；如果拖入时未自动添加，点击+按钮手动添加。

步骤3：代码中加载资源到WebView #

通过Platform.OS区分平台，iOS端借助require()自动获取资源的bundle路径，示例代码如下：

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

const LocalHTMLViewer = () => {
  let resourcePath;
  if (Platform.OS === 'ios') {
    // iOS下通过require获取资源的uri
    resourcePath = require('./your-local-file.html').uri;
  } else {
    // 你已实现的Android端逻辑
    resourcePath = 'file:///android_asset/your-local-file.html';
  }

  return <WebView source={{ uri: resourcePath }} />;
};

export default LocalHTMLViewer;

注意事项 #

• 若HTML引用了本地资源，需确保这些资源和HTML文件在同一目录下，且全部添加到Copy Bundle Resources中。
• 若出现资源加载失败，检查Xcode中对应资源的Target Membership是否勾选了主项目target。

内容的提问来源于stack exchange，提问作者Nikhil Mane.