React Native Android静态图片加载失败问题求助

我来帮你排查下这两个图片加载的坑，都是混合集成RN时很常见的问题👇

问题1：使用asset:/前缀加载原生资源失败 #

你用<Image source={{uri: 'asset:/app_icon.png'}} />只显示空白，核心原因是混合应用里RN对Android原生drawable资源的引用规则和纯RN应用不一样，直接加asset:/前缀找不到资源。

解决步骤： #

• 首先确认你的图片放在Android项目的res/drawable-xxx目录下（比如drawable-hdpi、drawable-xhdpi），文件名必须符合Android规范：全小写、用下划线分隔，不能有空格或特殊字符（比如app_icon.png是合规的，AppIcon.png就不行）。
• 修改RN的Image组件写法，去掉asset:/前缀和文件后缀，直接写资源名：

  <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
  

• （可选，旧版本RN需要）在android/app/build.gradle的android块里添加资源目录配置，确保RN能识别原生drawable资源：

  project.ext.react = [
      enableHermes: false,  // 修改后需要clean rebuild
      assetsDirs: ["src/main/res/drawable"]
  ]
  

• 最后同步Gradle，清理项目缓存（运行npx react-native start --reset-cache），重新打包Android应用。

问题2：使用require()加载绝对路径图片报错 #

你用require('app/res/drawable-hdpi/image.png')报错，是因为RN的require()只能解析RN项目目录内的文件，无法直接引用Android原生res目录的绝对路径——RN的模块解析器和Android的资源系统是两个独立的体系。

解决步骤： #

• 把需要的图片复制到RN项目的专属目录里，比如在RN根目录下创建assets/images文件夹，把image.png放进去。
• 用相对路径引用图片（路径是相对于当前RN组件文件的）：
  假设你的组件文件在/Users/MyName/StudioProjects/reatProject/android/react-native/index.js，图片在/Users/MyName/StudioProjects/reatProject/android/react-native/assets/images/image.png，那么写法是：

  <Image source={require('./assets/images/image.png')} style={{width: 40, height: 40}} />
  

• 注意：require()里的路径必须是静态字符串，不能用变量拼接（比如require('./assets/images/' + imgName)是不行的），而且要带完整的文件后缀。
• （可选）检查metro.config.js的资源配置，确保图片后缀被允许：

  const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  
  const config = {};
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  
  // 旧版本RN可以这样配置：
  // module.exports = {
  //   resolver: {
  //     assetExts: ['png', 'jpg', 'jpeg', 'gif'],
  //   },
  // };
  

• 重启Metro服务，重新运行应用。

通用排查小技巧 #

• 检查图片文件名的大小写：RN在iOS上严格区分大小写，Android不区分，但统一用小写能避免跨平台问题。
• 清理缓存是万能小妙招：运行npx react-native clean + npx react-native start --reset-cache，很多奇怪的资源加载问题都能解决。
• 确认RN和Android原生版本兼容：如果你的RN版本比较新，可能需要调整Android的编译SDK版本，建议对应版本的RN官方文档里的混合集成说明。

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