React Native中使用变量设置<Image/>图片源报错求助

嘿，刚入门React Native遇到这个问题太正常了，我来给你掰扯清楚怎么回事～

为什么会报这个错？ #

React Native在打包静态本地图片时，需要提前明确知道你要加载的图片路径，这样打包工具才能把图片正确打包进APP里。而require(item.name)里的item.name是个变量，打包工具没法在编译阶段确定它具体对应哪张图片，所以就抛出这个错误啦。

解决办法分这几种情况： #

1. 已知图片列表：用映射对象提前关联路径

如果你的图片是固定的几个，先创建一个图片映射对象，把每个图片名和对应的require路径绑定好，之后直接通过键名取用就行：

// 先定义好所有需要用到的图片映射
const imageMap = {
  "profile": require("./assets/profile.png"),
  "home_icon": require("./assets/home_icon.png"),
  "settings": require("./assets/settings.png")
};

// 之后在组件里使用
<Image source={imageMap[item.name]} style={{ width: 50, height: 50 }} />

举个完整的小例子，比如用FlatList渲染列表项：

import React from 'react';
import { View, Image, FlatList, Text } from 'react-native';

const imageMap = {
  apple: require('./fruits/apple.png'),
  banana: require('./fruits/banana.png'),
  orange: require('./fruits/orange.png')
};

const FruitList = () => {
  const fruitData = [
    { name: 'apple', label: '苹果' },
    { name: 'banana', label: '香蕉' },
    { name: 'orange', label: '橙子' }
  ];

  const renderFruitItem = ({ item }) => (
    <View style={{ flexDirection: 'row', alignItems: 'center', margin: 10 }}>
      <Image 
        source={imageMap[item.name]} 
        style={{ width: 60, height: 60, marginRight: 10 }} 
      />
      <Text>{item.label}</Text>
    </View>
  );

  return <FlatList data={fruitData} renderItem={renderFruitItem} />;
};

export default FruitList;

2. 远程图片：直接用uri属性

如果你的图片是网络上的远程资源，那不用require，直接给source传一个包含uri的对象就行，记得一定要设置宽高哦：

<Image 
  source={{ uri: item.imageUrl }} 
  style={{ width: 100, height: 100 }} 
/>

3. 大量本地图片：放在原生资源目录（进阶）

如果有非常多的本地图片，不想一个个写映射，可以把图片放到Android的res/drawable目录或者iOS的Assets.xcassets里，然后用对应原生平台的引用方式（比如Android用require('@drawable/' + item.name)），不过这种方式需要配置原生项目，适合有一定基础后再尝试。

新手额外提醒 #

• 图片路径一定要写对！比如./assets/xxx.png是相对当前组件文件的路径，别写错层级。
• Image组件必须设置width和height样式，不然图片可能显示不出来。

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