iOS Release构建中React Native WebView无法加载本地HTML内的本地视频

问题原因 #

Debug模式下，React Native会将静态资源托管在本地开发服务器，相对路径可以正常解析；但Release模式下，资源会被打包进App Bundle，直接通过require加载HTML文件时，HTML中的相对路径无法正确映射到Bundle内的资源位置，导致视频加载失败。

解决方案 #

方案1：通过React Native注入视频资源的绝对URI

将视频资源的正确URI传递给HTML，替换原有的相对路径，确保Release模式下路径正确。

在主页面组件中实现如下代码：

import React, { useRef, useState, useEffect } from 'react';
import { WebView, StyleSheet } from 'react-native';

const DemoScreen = ({ onMessage }) => {
  const webViewRef = useRef(null);
  const [htmlContent, setHtmlContent] = useState('');
  // 获取视频资源的绝对URI
  const videoUri = require('../../html/html/images/demo.mp4').uri;

  useEffect(() => {
    // 读取HTML文件内容并替换视频路径
    fetch(require('../../html/html/demo.html'))
      .then(res => res.text())
      .then(rawHtml => {
        const updatedHtml = rawHtml.replace('images/demo.mp4', videoUri);
        setHtmlContent(updatedHtml);
      })
      .catch(err => console.error('读取HTML失败:', err));
  }, []);

  return (
    <WebView
      ref={webViewRef}
      source={{ html: htmlContent }}
      style={styles.mainContainer}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      originWhitelist={['*']}
      onMessage={m => onMessage(m)}
    />
  );
};

const styles = StyleSheet.create({
  mainContainer: { flex: 1 }
});

export default DemoScreen;

方案2：检查iOS打包资源配置

确保视频文件被正确添加到iOS项目的Bundle资源中，避免Release打包时遗漏：

• 打开iOS项目根目录下的ios/[你的项目名].xcworkspace
• 在左侧文件导航栏找到demo.mp4，确认它已被添加到项目中
• 选中项目Target，进入Build Phases -> Copy Bundle Resources
• 如果demo.mp4不在列表中，点击+按钮添加该文件

方案3：使用本地静态服务器加载资源

通过本地HTTP服务器托管HTML和视频资源，确保路径解析一致：

1. 安装依赖：

npm install react-native-static-server --save

2. 在组件中启动服务器并加载HTML：

import React, { useRef, useState, useEffect } from 'react';
import { WebView, StyleSheet } from 'react-native';
import StaticServer from 'react-native-static-server';

const DemoScreen = ({ onMessage }) => {
  const webViewRef = useRef(null);
  const [serverUrl, setServerUrl] = useState('');
  // 托管html目录
  const server = new StaticServer(8080, require('../../html/html').uri);

  useEffect(() => {
    server.start().then(url => {
      setServerUrl(`${url}/demo.html`);
    });

    return () => server.stop();
  }, []);

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: serverUrl }}
      style={styles.mainContainer}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      originWhitelist={['*']}
      onMessage={m => onMessage(m)}
    />
  );
};

const styles = StyleSheet.create({
  mainContainer: { flex: 1 }
});

export default DemoScreen;

内容的提问来源于stack exchange，提问作者Harshal Kalavadiya