React Native添加自定义资产失败：metro.config.js被忽略求助

你遇到的核心问题是混淆了react-native.config.js和metro.config.js的配置职责，导致自定义资产扩展名没被Metro正确识别，同时配置项位置错误引发了验证警告。下面是分步解决方案：

1. 明确两个配置文件的分工 #

• react-native.config.js：负责配置React Native项目的自动链接行为，比如声明需要链接的资源目录（如字体、图标），但它不负责定义哪些文件扩展名属于资产。
• metro.config.js：Metro打包器的核心配置文件，用于定义文件解析规则，包括哪些扩展名被视为资产（asset），这才是添加.xml、.pb等自定义扩展名的正确位置。

2. 修正react-native.config.js配置 #

你原配置里把assetExts放在顶层是错误的——这个选项不属于react-native.config.js的合法配置项，所以新项目会抛出“未知选项”警告。修正后只保留用于资源目录声明的assets字段：

module.exports = { 
  project: { ios: {}, android: {}, }, 
  assets: [ './src/assets/icons', './src/assets/svg', './src/assets/ai' ], 
};

3. 正确配置metro.config.js识别自定义资产 #

在RN 0.60.5版本中，需要通过metro-config扩展默认的资产扩展名列表。创建或修改metro.config.js如下：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  // 获取Metro默认配置
  const defaultConfig = await getDefaultConfig();
  const { assetExts } = defaultConfig.resolver;
  
  return {
    resolver: {
      // 将自定义扩展名追加到默认列表中
      assetExts: [...assetExts, 'xml', 'pb', 'tflite'],
    },
  };
})();

4. 清除缓存并重启Metro #

Metro会缓存旧配置，修改后必须清除缓存重启打包服务才能生效：

npx react-native start --reset-cache

原配置报错的原因 #

当你把assetExts放在react-native.config.js顶层时，Metro完全没接收到这个配置，它只会识别默认的资产扩展名（如.png、.jpg）。对于.xml这类未配置的文件，Metro会尝试将其当作JavaScript模块解析，自然会抛出“文件不存在”的错误——因为它本身不是JS模块。

额外注意事项 #

• 如果react-native-camera有特殊的Metro配置需求，确保它和你的自定义资产配置兼容，避免扩展名冲突。
• 验证配置是否生效：可以尝试在代码中用require('./path/to/your/file.xml')引用资产，若打包不再报错，说明配置已生效。

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