react-native-web-view内嵌JS正常 引入独立JS文件失效如何解决

• react-native-webview加载本地HTML的场景下，无法正确解析./chusa.js这类相对路径，找不到独立JS文件导致方法未定义
• 本地静态资源（HTML、JS、CSS等）未按RN原生平台要求放到对应资源目录，WebView没有访问独立JS文件的权限

1. 统一存放静态资源并配置原生目录 #

把所有用到的本地HTML、JS、CSS文件统一放到RN项目根目录的/web-resource文件夹下，再分别配置双端资源目录：

• 安卓：把web-resource整个文件夹复制到安卓项目的/android/app/src/main/assets/目录下
• iOS：用Xcode打开iOS项目，右键项目名选择「Add Files to 项目名」，选中web-resource文件夹，勾选「Copy items if needed」和「Create folder references」后添加到项目中

2. 修正HTML中JS引入路径 #

把HTML里的script标签src路径简化，适配WebView本地资源加载逻辑：

<!-- 原有写法 -->
<!-- <script src="./chusa.js"></script> -->
<!-- 替换为 -->
<script src="chusa.js"></script>

3. 修正WebView的source配置 #

根据平台拼接正确的本地资源URI，同时开启本地文件访问权限：

import { Platform } from 'react-native';

// 此处以HTML文件名为index.html、存放在web-resource根目录为例
const uri = Platform.OS === 'android' 
  ? 'file:///android_asset/web-resource/index.html'
  : 'file:///web-resource/index.html';

<WebView 
  source={{ uri }} 
  style={styles.webview} 
  allowFileAccess={true}
  allowUniversalAccessFromFileURLs={true}
/>

如果不想配置原生资源目录，可以直接把JS代码通过WebView的injectedJavaScript属性注入到页面中，无需修改HTML的script引入逻辑：

const chusaJsCode = `
function alabama() {
  alert('Hello alabama');
}
`;

<WebView 
  source={{ uri: `${origin}/${file}` }} 
  style={styles.webview}
  injectedJavaScript={chusaJsCode}
/>

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