在Expo Go的React Native页面运行Pixi.js项目遇空白屏问题

1. 修复Metro的assetExts配置错误 #

报错'bundle.js' cannot be loaded as its extension is not registered in 'assetExts'是因为Metro默认把.js视为源码文件，而非静态资源。你的bundle.js是游戏打包后的静态文件，需要修改Metro配置让它识别：

在项目根目录创建或修改metro.config.js，添加以下内容：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'js'],
  },
});

2. 确保HTML资源引用路径正确 #

检查你的dist/index.html中引用bundle.js的路径，必须是相对路径且和文件结构匹配：

<!-- 正确的相对路径示例，假设bundle.js和index.html在同一目录 -->
<script src="./bundle.js"></script>

3. 完善WebView配置 #

给WebView添加必要的权限和调试属性，确保游戏能正常运行：

<WebView
  source={GameHTML}
  style={{flex: 1}}
  originWhitelist={['*']}
  javaScriptEnabled={true}
  domStorageEnabled={true} <!-- 游戏通常需要DOM存储支持 -->
  allowFileAccess={true} <!-- 允许访问本地静态资源 -->
  allowUniversalAccessFromFileURLs={true} <!-- 允许本地页面加载其他资源 -->
  onError={(e) => console.error('WebView内部错误:', e.nativeEvent)} <!-- 捕获错误信息 -->
  onLoadEnd={() => console.log('WebView加载完成')} <!-- 确认加载状态 -->
/>

4. 备选方案：直接从原生资源目录加载 #

如果Metro路径解析还是有问题，可把整个dist目录放到原生资源目录：

• 安卓：复制到android/app/src/main/assets/dist，然后WebView的source改为：

  source={{ uri: 'file:///android_asset/dist/index.html' }}
  

• iOS：复制到ios/[你的项目名]/Resources/dist，然后WebView的source改为：

  source={{ uri: 'dist/index.html' }}
  

5. 调试WebView内部页面 #

用Chrome调试工具查看WebView内部的报错：

1. 打开Chrome浏览器，输入chrome://inspect
2. 找到你的React Native应用，点击inspect进入WebView调试面板
3. 在控制台查看是否有Pixi.js加载失败、资源路径错误等具体问题

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