React Native本地文件默认值设置：React Native Elements Avatar组件默认图标配置失效求助

嗨，我完全懂你遇到的困扰——想用OR逻辑给Avatar组件加默认图标，结果完全没生效对吧？这其实是React Native里require()的工作机制和你预想的不一样，我来给你掰扯清楚原因和靠谱的解决办法。

首先得搞明白为什么你的写法不行：React Native的require()是在编译阶段静态解析的，不是运行时动态判断的。你写的require(动态拼接路径) || require(默认路径)，只要动态路径对应的文件不存在，编译阶段就会直接抛出“找不到文件”的错误，根本到不了运行时去执行那个OR逻辑判断，自然就不会显示默认图标了。

那正确的姿势应该是怎样的？这里给你推荐两种最实用的方案：

方案一：提前创建图标映射表 #

把所有已经准备好的图标都提前用require()引入，存到一个对象里，然后通过nameEN去匹配，匹配不到就用默认图标。这样所有的require()都是静态写死的，编译时能正确处理，不会报错。

代码示例：

// 先定义好已有的图标映射，把你准备好的图标逐一加进来
const iconMap = {
  "Home": require("../../assets/Home/icon.png"),
  "Profile": require("../../assets/Profile/icon.png"),
  // 其他已有的图标...
};

// 然后在渲染Avatar的时候使用
{sites.map((key) => {
  // 先从映射表找对应的图标，找不到就用默认的
  const targetIcon = iconMap[key.properties.nameEN] || require("../../assets/default/icon.png");
  
  return (
    <Avatar
      size={32}
      containerStyle={{ margin: 0, padding: "0.1em" }}
      rounded
      source={targetIcon}
      onPress={() => {
        displayModal(key);
      }}
    />
  );
})}

如果你的图标数量很多，手动写映射表太麻烦，可以写个简单的脚本自动生成这个对象，省得重复劳动。

方案二：统一图标命名规则（可选） #

如果能把所有图标统一放在同一个目录下，命名规则改成icon-${nameEN}.png，那可以简化成下面的写法，但前提是所有已有的图标都严格遵循这个命名，不存在的还是要靠默认值兜底：

// 先定义一个获取图标的函数
const getIconSource = (name) => {
  // 枚举所有已存在的图标名称
  const availableIcons = ["Home", "Profile", "Settings"];
  if (availableIcons.includes(name)) {
    return require(`../../assets/icons/icon-${name}.png`);
  }
  return require("../../assets/default/icon.png");
};

// 渲染时调用这个函数
{sites.map((key) => {
  return (
    <Avatar
      size={32}
      containerStyle={{ margin: 0, padding: "0.1em" }}
      rounded
      source={getIconSource(key.properties.nameEN)}
      onPress={() => {
        displayModal(key);
      }}
    />
  );
})}

这个方案的核心还是提前明确哪些图标是存在的，避免动态拼接require()路径导致编译错误。

总结一下：RN里不能用动态拼接的require()加OR逻辑来做默认值，必须通过静态的方式先确认文件存在，再做条件判断。上面的两种方案都能解决你的问题，第一种更稳妥，第二种适合图标命名规范的场景。

备注：内容来源于stack exchange，提问作者user16971617