React Native Android端WebView加载本地静态HTML文件遇阻求助

我是React Native新手，正在评估将一款原iOS开发的RN（0.65.3版本）项目迁移到Android的可行性。目前已完成环境搭建，能通过MacBook Pro M1编译启动应用，但WebView加载随资源包发布的本地静态HTML文件（含自执行JS）时遇到问题：

• 原iOS端将HTML放在组件目录，通过require引入可正常加载，但Android端不支持这种方式
• 尝试用file://路径并开启allowFileAccess，仍出现ERR_FILE_NOT_FOUND或ERR_ACCESS_DENIED错误
• 将HTML移至assets目录也没用，且发现只有显式require的静态文件才会被复制到Android的res目录
• 目前配置下仍报ERR_ACCESS_DENIED，但静态图片通过require引入可正常显示

原iOS工作代码 #

const HTML: { [x: string]: any } = {
    app_avatar_1: () => require('../../html/webview/app_avatar_1.html'),
    ...
};

return (
    <View style={styles.container}>
        <WebView
            ref={webViewRef}
            originWhitelist={['*']}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            source={HTML[avatarId]()}
            onMessage={onMessage}
        />
    </View>
);

尝试的Android代码 #

const HTML: { [x: string]: any } = {
    app_avatar_1: () => require('assets/webview/app_avatar_1.html'),
    ...
}

<WebView
    ref={webViewRef}
    originWhitelist={['*']}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    source={{uri: 'file:///assets/webview/app_avatar_1.html'}}
    allowFileAccess={true}
    onMessage={onMessage}
/>

静态图片正常加载代码 #

const avatarImages: { [x: string]: ImageSourcePropType } = {
    app_avatar_1: require('assets/avatars/thumb-0.jpg'),
    ....
}

<Image
    style={styles.image}
    source={avatarImages[el.id]}
    resizeMode={'cover'}
/>

解决方案 #

1. 复用require获取正确资源路径
   Android端无法直接通过file://访问assets目录，RN会将require的静态资源编译到专属路径，直接复用图片的加载逻辑即可：

const HTML: { [x: string]: any } = {
    app_avatar_1: require('assets/webview/app_avatar_1.html'),
    ...
};

return (
    <View style={styles.container}>
        <WebView
            ref={webViewRef}
            originWhitelist={['*']}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            source={HTML[avatarId]}
            allowFileAccess={true}
            allowFileAccessFromFileURLs={true} // 允许HTML内JS访问本地文件
            allowUniversalAccessFromFileURLs={true} // 允许跨域访问本地资源
            onMessage={onMessage}
        />
    </View>
);

2. 确保HTML文件被正确打包

• 确认HTML文件的实际路径与require中的路径完全一致，RN仅会打包显式require的文件，所有需要加载的HTML都必须通过require引入
• 检查android/app/build.gradle，默认配置下RN会自动处理require的资源，无需额外配置；若有自定义资源规则，确保assets目录被包含在打包范围内

3. 处理HTML内部的资源引用
   如果HTML中包含本地CSS、JS或图片：

• 将这些资源同样通过require引入，再通过injectJavaScript把资源URI注入到HTML中使用
• 或把所有相关资源放在同一目录，使用RN编译后的本地资源路径格式访问

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