React Native Web Player显示正常，Android端图片无法渲染问题求助

兄弟，我之前也碰到过一模一样的问题！Web端跑起来图片好好的，安卓真机上就是一片空白，折腾了好一阵才搞定，给你分享几个最可能的原因和解决办法：

1. 本地图片引用方式错误 #

React Native的Web端和原生端对本地图片的处理逻辑不一样：

• Web端可以直接用字符串路径：source={{uri: './assets/xxx.png'}}
• 但安卓原生端必须使用require()静态引入，而且路径不能动态拼接（metro打包工具需要静态分析资源）

举个正确的例子：

// 正确写法
<Image 
  source={require('./assets/your-image.png')} 
  style={{ width: 100, height: 100 }} 
/>

// 错误写法（安卓不识别）
const imgPath = './assets/your-image.png';
<Image source={{uri: imgPath}} />

2. 检查metro配置是否包含图片后缀 #

如果你的图片后缀比较特殊（比如webp），需要在metro.config.js里添加对应的扩展名，确保打包时能识别：

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

const config = {};

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

3. 清理安卓缓存重新打包 #

有时候缓存会导致资源没有正确打包，执行以下步骤：

• 先停止正在运行的metro服务
• 进入安卓目录清理gradle缓存：

  cd android && ./gradlew clean
  

• 回到项目根目录，重新启动项目：

  react-native run-android
  

4. 确认图片资源路径正确 #

确保图片文件确实存在于你引用的路径下，比如./assets/your-image.png是相对于App.js的正确路径，大小写也要注意（安卓系统对路径大小写敏感，Web端可能不敏感）。

5. 检查图片尺寸和样式 #

有时候图片其实加载了，但因为没有设置宽高样式，导致显示为空白。一定要给Image组件设置明确的width和height样式，或者用resizeMode属性调整显示方式。

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