React Native动态拼接字符串require加载本地图片不显示问题

两种写法加载失败的核心逻辑：

• 动态拼接路径的require()写法无效：React Native 官方打包工具 Metro 在应用构建阶段会静态扫描所有代码里的require引用，不支持运行时动态拼接路径的require调用，构建阶段无法识别你要加载的目标图片，对应资源不会被打入应用包，自然无法显示。
• 相对路径写在uri字段的写法无效：Image组件的uri参数仅支持加载网络资源、设备本地存储的绝对路径资源，无法识别项目内assets目录的相对路径，因此也会加载失败。

方案1：静态图片映射表（推荐，加载性能最优） #

提前将所有可能用到的头像图片通过完整静态路径require，构建成图片名和资源的映射对象，Metro在构建时可以识别所有静态声明的图片资源，会自动将对应资源打包。渲染时直接根据图片名从映射表取对应资源即可，同时可以配置兜底图避免图片名匹配失败的报错。
示例代码：

// 提前声明所有可用图片的映射，注意require路径必须写完整静态字符串，不能做字符串拼接
const userImageMap = {
  "user001.png": require("../assets/pix/user001.png"),
  "user002.png": require("../assets/pix/user002.png"),
  "default.png": require("../assets/pix/default.png")
  // 补充所有profileData中可能出现的user_image对应的资源
};

const Viewers = () => {
  return (
    <FlatList 
      data={profileData} 
      keyExtractor={item => item.id} 
      renderItem={({item}) => {
        const source = userImageMap[item.user_image] ?? userImageMap["default.png"];
        return (
          <View>
            <Image 
              source={source}
              style={{
                width: 35,
                height: 35
              }}
            />
          </View>                                                
        )
      }}
    />
  );
};

方案2：网络资源/base64资源加载 #

如果图片量级较大，维护映射表成本高，可以将pix目录下的所有图片部署到静态资源服务/CDN，拿到可直接访问的HTTP/HTTPS链接后，用uri方式加载：

<Image 
  source={{uri: `https://你的静态资源地址/pix/${item.user_image}`}}
  style={{width: 35, height: 35}}
/>

如果是体积小的图标，也可以将图片转成base64编码字符串存入profileData的对应字段，直接传入base64格式的uri也可正常渲染。

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