基于状态的图像加载答案

【问题标题】：Image Load based on state基于状态的图像加载
【发布时间】：2020-04-01 11:27:15
【问题描述】：

我想根据从 API 调用获得的状态加载图像。例如，如果 API 给我'1'，我想加载1.png。不幸的是，我收到了上述错误。

这是我的代码

let img = info.WeatherIcon ? require(`../../img/icons/${info.WeatherIcon}.png`) : require('../../img/icons/7.png')
< Image style = {{ width:120, height:120}} source = { img } />

【问题讨论】：

标签： javascript react-native react-native-image

【解决方案1】：

您不能使用动态链接。根据 React-Native，在编译包之前需要加载所有图像源。

所以改变你的代码如下，

let img =
  info.WeatherIcon == "1"
    ? require("../../img/icons/1.png")
    : require("../../img/icons/7.png");

然后你可以渲染你的Image

<Image style={{ width: 120, height: 120 }} source={img} />

对于更复杂的示例，您可以使用如下条件，

switch (info.WeatherIcon) {
  case "1":
    return require("../../img/icons/1.png");
  case "2":
    return require("../../img/icons/2.png");
  case "3":
    return require("../../img/icons/3.png");
  default:
    return require("../../img/icons/7.png");
}

希望这对您有所帮助。如有疑问，请随意

【讨论】：

我有 50 多张图片。它的工作很乏味吗？还有其他选择吗？
@MuhammadSami 这就是 react-native 的工作原理。但您可以尝试创建一个自定义组件，在从 API 传递单个图像时使用 react.PureComponent 或 react.memo 呈现图像。