如何为React Native不同环境版本配置不同图片？

问题核心 #

React Native 的 require() 不支持动态路径拼接，打包阶段无法解析变量形式的路径，导致iOS端无法正确加载图片。

解决方法 #

方法1：静态引入+条件判断（最直接）

提前静态引入所有环境的Logo，再根据环境变量选择对应资源：

// 静态引入两个版本的Logo
const LogoMain = require('../../../assets/logo_main.png');
const LogoDev = require('../../../assets/logo_dev.png');

// 根据环境变量选择资源
const currentLogo = Config.LOGO === 'logo_main.png' ? LogoMain : LogoDev;

// 组件中使用
<Image source={currentLogo} />

优点：无需额外配置，逻辑清晰，适合少量环境场景。

方法2：使用Babel插件实现静态替换

通过babel插件打包时将环境变量替换为静态字符串，让require()能正常解析：

1. 安装插件：

npm install babel-plugin-transform-inline-environment-variables --save-dev

2. 修改babel.config.js：

{
  "plugins": [
    ["transform-inline-environment-variables", {
      "include": ["LOGO"]
    }]
  ]
}

3. 原代码无需修改，打包时Config.LOGO会被替换为对应静态路径，require()即可正常解析。

方法3：配置Metro支持动态路径（适合多环境/大量图片）

修改metro.config.js，让Metro能解析动态图片路径：

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

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: ['png', 'jpg', 'jpeg', 'gif'],
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        inlineRequires: true,
      },
    }),
  },
});

然后通过Image.resolveAssetSource获取资源：

import { Image } from 'react-native';

const getLogoSource = () => {
  const asset = require(`../../../assets/${Config.LOGO}`);
  return Image.resolveAssetSource(asset);
};

// 组件中使用
<Image source={getLogoSource()} />

注意事项 #

• 确保打包时加载了对应环境的.env文件，检查Config.LOGO的值是否正确。
• iOS端修改配置后需重新编译项目（XCode中Clean Build Folder后再运行）。
• 注意图片路径的大小写，iOS文件系统区分大小写，避免路径拼写错误。

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