详解React Native中如何使用自定义的引用路径
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自定义引用路径的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了关于useEffect执行两次的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了react diff算法源码解析的相关资料，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
今天给大家分享的是使用React Native制作一个简单的游戏，这个游戏可以跨平台操作，本文通过实例图文相结合给大家介绍的非常详细，对React Native游戏相关知识感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了React的组件协同使用,文中给大家提到在React开发中，有哪些场景的组件协同？又如何去实现组件的协同使用呢？本文都给大家提到，感兴趣的朋友跟随小编一起看看吧2021-09-09
在React中,受控组件指的是表单元素的value值受React组件的state或props控制的组件,而非受控组件则是表单元素的value值由DOM自身负责管理的组件,本文将给大家详细介绍React受控组件与非受控组件,需要的朋友可以参考下2023-08-08
React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state)和生命周期函数2022-11-11
React TypeScript 应用中便捷使用Redux Toolkit方法详解
这篇文章主要为大家介绍了React TypeScript 应用中便捷使用Redux Toolkit方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
React router cache route实现缓存页面流程介绍
react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持2023-01-01
下面小编就为大家带来一篇浅谈react.js中实现tab吸顶效果的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家介绍了React结合Drag API实现拖拽示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论