React Native如何导入其他文件夹中的图片？（含项目结构与报错）

看你的错误提示和项目结构，问题出在路径相对位置搞错，还有两个小细节没注意到，我给你一步步理清楚：

问题分析 #

你的like.js在components/basic目录下，用./assets/icons/heart.png的话，程序会去components/basic/assets/icons找文件——但你的assets明明在项目根目录，这就导致了找不到文件的错误。另外还有两个小问题：

• React Native的Image组件用的是source属性，不是src
• 你没有在代码里导入Image组件

解决方案 #

方法1：修正相对路径（快速解决） #

从components/basic回到项目根目录需要往上跳两级（../代表上一级目录，../../就是根目录），然后再指向assets。同时补上Image的导入，把src改成source：

import React,{ Component } from 'react';
// 加上Image组件的导入
import{ View, Text, Image, AppRegistry } from 'react-native';

class Example extends Component {
  render () {
    return(
      // 修正路径，替换src为source
      <Image source={require('../../assets/icons/heart.png')} />
    );
  }
}

export default Example;

方法2：配置路径别名（适合大型项目） #

如果项目文件层级多，每次写长相对路径很麻烦，可以给根目录配置别名。比如在项目根目录的babel.config.js里添加如下配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@': './'
        }
      }
    ]
  ]
};

然后安装对应的依赖：

npm install --save-dev babel-plugin-module-resolver

之后你就可以用更简洁的路径导入图片了：

<Image source={require('@/assets/icons/heart.png')} />

这样修改后应该就能正常加载图片了，试试吧！

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