如何在React Native中添加src文件夹并实现绝对导入？

我来分享两种在React Native里实现绝对导入的方法，正好对应你提到的两种思路👇

方案一：使用src目录 + Metro配置 #

首先是你期望的目录结构：

• package.json
• android
• ios
• src
  • foo
    • hello.js
• index.js
• App.js
• node_modules

接下来需要修改Metro的配置，让它能识别并监听src目录的文件：
在metro.config.js中添加watchFolders配置项，代码如下：

const path = require('path');

module.exports = {
  // 保留你原有的其他配置
  watchFolders: [path.join(__dirname, 'src')],
};

配置完成后，你就可以在任意文件（比如App.js）中直接使用绝对路径导入模块了：

import hello from 'foo/hello';

方案二：将模块放入node_modules目录 #

这种方式不需要修改任何配置，直接把你的模块放到node_modules目录下，对应的目录结构如下：

• package.json
• android
• ios
• node_modules
  • foo
    • hello.js
• index.js
• App.js

因为Node.js和Metro默认会从node_modules目录中查找模块，所以你同样可以直接用绝对路径导入：

import hello from 'foo/hello';

两种方案的小对比 #

• 方案一更推荐：src目录是项目源码的标准存放位置，不会和第三方依赖混淆，项目结构更清晰，也便于后续维护。
• 方案二更简单：不需要修改任何配置，但容易和node_modules里的第三方依赖搞混，长期来看不利于项目的整洁性。

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