React Native WebView加载本地HTML无法触发CSS与JS文件问题咨询

这个场景WebView是完全支持的，问题出在你的资源加载配置和样式配置上，具体原因和修复方案如下：

问题原因 #

你使用require('./index.html')的方式加载本地HTML时，React Native打包流程只会单独打包这个HTML文件，不会将HTML内引用的同目录CSS、JS等相对路径资源一起打包，所以HTML运行时找不到对应的CSS和JS文件，自然无法生效。另外你当前的样式配置也会导致WebView内容被挤压不可见，容易误判为资源未生效。

修复方案 #

方案1：将静态资源放入原生资源目录（推荐） #

这个方案适合HTML关联资源较多的场景，操作步骤如下：

• 资源存放配置
  • 安卓端：在android/app/src/main/目录下新建assets文件夹，将index.html、15-puzzle.css、15-puzzle.js三个文件都放入该文件夹
  • iOS端：用Xcode打开iOS项目，将三个文件拖入项目根目录，勾选「Copy items if needed」「Create groups」，同时选中你的项目target确认加入资源列表
• 修改WebView配置，首先导入Platform组件，然后修改WebView属性：

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

export default Game = () =>  {
  return (
    <WebView
      originWhitelist={['*']}
      allowFileAccess={true} // 安卓端允许访问本地文件
      source={
        Platform.OS === 'android'
          ? { uri: 'file:///android_asset/index.html' }
          : { uri: 'index.html' }
      }
      style={styles.container}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // 移除原来的padding配置，避免内容被挤出可视区域
  },
});

方案2：内联CSS和JS代码（适合小型项目） #

如果你的CSS和JS代码量不大，可以直接把CSS内容写入HTML的<style>标签，JS内容写入HTML的<script>标签，完全去掉外部相对路径引用，之后用原来的require('./index.html')方式加载即可生效。

其他注意事项 #

你贴出的HTML代码缺少</body>和</html>闭合标签，请补充完整避免渲染异常。

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