React Native字符串插值失效求助：动态加载天气图标失败

问题根源 #

React Native使用的Metro打包器和Web端React的Webpack打包逻辑存在差异：

• Webpack支持运行时解析动态拼接的资源路径；
• Metro需要在编译阶段确定所有要打包的资源路径，完全动态拼接的require路径（比如require(./Icons/day/${pic})）无法被Metro识别，导致资源找不到。

解决方案 #

方案1：建立图标映射表（最稳妥） #

预先导入所有可能用到的天气图标，以文件名作为key建立映射关系，之后直接通过动态获取的文件名匹配对应资源：

// 提前导入所有天气图标，根据实际需求补充完整
const weatherIcons = {
  '113.png': require('./Icons/day/113.png'),
  '116.png': require('./Icons/day/116.png'),
  '119.png': require('./Icons/day/119.png'),
  // 其他图标...
};

// 接口请求后获取文件名并设置图标
const pic = response.data.current.condition.icon.slice(-7);
// 可添加默认图标，防止找不到对应资源时出错
setIcon(weatherIcons[pic] || require('./Icons/day/default.png'));

方案2：验证动态路径的有效性 #

先确认pic的实际值是否正确：比如打印pic，检查是否是完整的目标文件名（如113.png）。如果slice(-7)截取的结果包含多余路径（比如/113.png），会导致路径错误，需要调整截取逻辑。

方案3：配置Metro支持目录资源（可选） #

若不想手动导入所有图标，可修改Metro配置让它打包指定目录下的所有图片，但这种方式可控性不如映射表：
在项目根目录的metro.config.js中补充配置：

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

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

注：Metro默认会打包项目内资源，但动态路径需保证前缀固定（比如./Icons/day/为固定部分，变量仅在文件名位置），否则仍可能无法识别。

补充说明 #

指定具体路径时require('./Icons/day/113.png')能生效，是因为该路径是静态可解析的，Metro编译时可直接定位并打包对应资源。

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