详解react setstate（详解React Native中如何使用自定义的引用路径）

时间2025-07-30 09:15:20分类IT科技浏览6278

导读：RN的相对路径地狱我刚接触RN时，就发现所有的demo中给出来的路径都是相对路径，我自己的练习项目中想改成自定义的绝对路径，但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了。伴随着RN的学习和开发练习，我的代码也变得越来越多，越来越复杂，我逐渐发现RN的相对路径越来越麻...

RN的相对路径地狱

我刚接触RN时，就发现所有的demo中给出来的路径都是相对路径，我自己的练习项目中想改成自定义的绝对路径，但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了。伴随着RN的学习和开发练习，我的代码也变得越来越多，越来越复杂，我逐渐发现RN的相对路径越来越麻烦，比如我把某个文件移动到另一个不同深度的文件夹中，那么就需要把所有引用这个文件的地方都改一遍。请看下面这些例子，这些小点点，晃得我眼晕。

import { deviceInfo } from ../../utilities/device ... import { API, DEV } from ../../../config/api ... import { Headers } from ../../widgets/nav ... import { basic } from ../../styles/theme ...

RN的自定义路径需要的依赖

作为前端开发时熟悉的webpack.config.js ，在RN的脚手架中并没有看到，但是要知道，webpack.config.js里用来自定义import路径的resolve.alias最终目的也是让babel在翻译代码时，能够找到正确的路径。所以RN里想用自定义的引用路径，还得靠babel的配置才行。

安装依赖babel-plugin-module-resolver

yarn add babel-plugin-module-resolver -D

配置babel.config.js

plugins: [ [ require.resolve(babel-plugin-module-resolver), { extensions: [.js, .jsx], root: [.], alias: { utilities: ./src/utilities, config: ./src/config, widgets: ./src/widgets, styles: ./src/styles } }, ], ]

配置jsconfig.json

{ "compilerOptions": { "baseUrl": ".", "paths": { "utilities": ["./src/utilities/*"], "config": ["./src/config/*"], "widgets": ["./src/widgets/*"], "styles": ["./src/styles/*"], } } }

RN脚手架默认的情况下，是没有这个文件的，需要自己新建。

把相对路径都改成自定义引用

import { deviceInfo } from utilities/device ... import { API, DEV } from config/api ... import { Headers } from widgets/nav ... import { basic } from styles/theme ...

重启

yarn start

此时我发现，自定义的路径并没有起作用，Metro报错说找不到路径。因为我的所有React组件的定义，都是以jsx为文件后缀的。我在项目里使用了eslint-plugin-react这个eslint插件，它的推荐规则就是要React的组件的文件后缀为jsx 。当我把文件后缀改成js后，代码就能正常运行了。

我觉得文件后缀为jsx的情况下，jsconfig.js也能通过某种方式起作用，可惜我现在还不知道。

解决自定义引用路径导致的eslint报错问题

如果你使用了eslint-plugin-react ，那么当你用js作为React组件的文件后缀时，eslint会报错。为了解决自定义引用路径问题，我只能牺牲掉这条eslint的rule。在.eslintrc.js加上这一条rule ，就可以解决掉它。

rules:[ react/jsx-filename-extension: [error, { extensions: [.js, .jsx]}] ]

如果你使用了airbnb或者单独引用了eslint-plugin-import，那么当你利用babel-plugin-module-resolver成功解析了自定义引用路径的同时，eslint就会因为无法找到这些路径而报错。因为涉及到整个项目的所有文件，不可能在文件里简单的ignore某个rule来消除错误，而是需要在.eslintrc.js里覆盖eslint-plugin-import的import/no-unresolved这条rule才行。

rules:[ import/no-unresolved: [2, { ignore: [^utilities, ^config, ^widgets, ^styles]}] ]

至此，解决了自定义引用路径问题，同时避免了eslint的报错。

以上就是详解React Native中如何使用自定义的引用路径的详细内容，更多关于React Native自定义引用路径的资料请关注本站其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。