React Native：用三元运算符动态设置Image Source遇语法错误求解

一、嵌套三元运算符的正确写法 #

你的语法错误来源于多余的对象包裹：require()本身就会返回Image组件source需要的对象格式（本地资源标识或{uri: ...}），不需要再用{}把它包起来，且嵌套三元的分支无需额外加外层大括号。

正确代码如下：

<Image
  source={
    iconName === "account-outline" 
      ? require("../../assets/images/account-outline.png")
      : iconName === "phone-outline"
        ? require("../../assets/images/phone-outline.png")
        : iconName === "email-outline"
          ? require("../../assets/images/email-outline.png")
          : require("../../assets/images/lock-outline.png")
  }
  style={{ height: 22, width: 22, marginRight: 10 }}
/>

二、更优的替代方案：对象映射 #

嵌套三元在分支较多时可读性差，推荐用键值对映射的方式，代码更清晰、易维护：

1. 先定义图标映射对象：

const iconMap = {
  "account-outline": require("../../assets/images/account-outline.png"),
  "phone-outline": require("../../assets/images/phone-outline.png"),
  "email-outline": require("../../assets/images/email-outline.png"),
  "lock-outline": require("../../assets/images/lock-outline.png"),
};

2. 在Image组件中使用：

<Image
  source={iconMap[iconName] || iconMap["lock-outline"]} // 兜底默认图标
  style={{ height: 22, width: 22, marginRight: 10 }}
/>

三、关于React Native动态设置本地Image source的说明 #

React Native支持动态设置本地图片的source，但有个关键限制：require()的参数必须是静态可解析的字符串，不能是动态拼接的路径（比如require(../../assets/images/${iconName}.png)这种写法会报错，因为打包工具无法提前解析所有可能的路径）。

上面的两种方案（三元、对象映射）都符合要求：每个require()的路径都是固定的静态字符串，打包时能被正确识别并打包对应的图片资源。

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