React Native中如何使用require()显示动态图片？

你的实现方式不可行 #

React Native中require()加载本地资源时，参数必须是静态字符串，不能是动态拼接的变量。打包工具在构建阶段会扫描所有静态require的资源并打包，动态变量的路径无法被提前识别，最终会导致图片加载失败。

可行解决方案 #

方案一：提前创建本地图片映射表 #

将所有可能用到的图片提前通过require导入并存储在映射对象中，根据API返回的symbol直接匹配对应的图片资源：

// 定义图片映射表，包含所有symbol对应的本地图片
const imageMap = {
  BTC: require('../images/BTC.png'),
  ETH: require('../images/ETH.png'),
  // 补充其他需要的symbol及对应图片
};

// 父组件传递映射后的图片资源
{apiData ? (
  apiData.data.map((item, key) => (
    <Listing
      key={key}
      symbol={item.symbol}
      imageSource={imageMap[item.symbol]}
    />
  ))
) : (
  <></>
)}

// 子组件使用图片
const Listing = ({ symbol, imageSource }) => {
  // 提供默认图片，避免symbol不存在时出错
  const defaultImage = require('../images/default.png');
  
  return (
    <View style={tw`flex-row justify-between p-10`}>
      <View style={tw`flex-row items-center`}>
        <Text style={tw`mr-2`}>{symbol}</Text>
        <Image
          source={imageSource || defaultImage}
          style={{ width: 50, height: 50 }}
        />
      </View>
    </View>
  );
};

方案二：使用网络图片（如果图片存放在远程服务器） #

如果图片不是本地资源，而是托管在远程服务器上，直接通过uri加载：

// 父组件传递远程图片地址（假设API返回的symbol对应远程URL，或者自己拼接）
{apiData ? (
  apiData.data.map((item, key) => (
    <Listing
      key={key}
      symbol={item.symbol}
      imageUrl={`https://your-image-host.com/${item.symbol}.png`}
    />
  ))
) : (
  <></>
)}

// 子组件加载网络图片
const Listing = ({ symbol, imageUrl }) => {
  return (
    <View style={tw`flex-row justify-between p-10`}>
      <View style={tw`flex-row items-center`}>
        <Text style={tw`mr-2`}>{symbol}</Text>
        <Image
          source={{ uri: imageUrl }}
          style={{ width: 50, height: 50 }}
        />
      </View>
    </View>
  );
};

注意事项 #

• 若使用本地图片，必须确保映射表包含所有API可能返回的symbol，否则需要添加默认图片兜底；
• require.context是Web环境的方案，React Native不支持，不要在RN项目中使用。

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