脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react-native配置@符号绝对路径

react-native 配置@符号绝对路径配置和绝对路径没有提示的问题

 更新时间：2024年01月11日 09:02:24   作者：Youyzq  
本文主要介绍了react-native 配置@符号绝对路径配置和绝对路径没有提示的问题,文中通过图文示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

这里需要用到vscode的包

yarn add babel-plugin-module-resolver

找到根目录里的babel.config.js

在这里插入图片描述

在页面添加plugins配置

在这里插入图片描述

直接替换

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@/utils': './src/utils',
          '@/pages': './src/pages',
          '@/navigator': './src/navigator',
          '@/models': './src/models',
          '@/config': './src/config',
          '@/components': './src/components',
          '@/assets': './src/assets',
        },
      },
    ],
  ],
};

解决没有提示的问题

在这里插入图片描述

输出@/的时候没有提示

下载插件Vscode

path-alias

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  "pathAlias.aliasMap": {
      "@": "${cwd}/src",
      "~": "${cwd}/src",
    },

直接替换掉重启一下vscode就可以了

在这里插入图片描述

但是会有一个问题jsx和tsx还是不会出现提示，希望有大佬能解决一下！！！！

到此这篇关于react-native 配置@符号绝对路径配置和绝对路径没有提示的问题的文章就介绍到这了,更多相关react-native配置@符号绝对路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • react 报错Module build failed: BrowserslistError: Unknown browser query `dead`问题的解决方法

    react 报错Module build failed: Browserslis

    这篇文章主要介绍了react 报错Module build failed: BrowserslistError: Unknown browser query `dead`问题的解决方法,需要的朋友可以参考下
    2023-06-06
  • react实现页面水印效果的全过程

    react实现页面水印效果的全过程

    大家常常关注的是网站图片增加水印,而很少关注页面水印,其实这个需求也是比较常见的,比如公文系统、合同系统等,这篇文章主要给大家介绍了关于react实现页面水印效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • React中super()和super(props)的区别小结

    React中super()和super(props)的区别小结

    本文主要介绍了React中super()和super(props)的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • React 中 map 处理异步数据不渲染的问题及解决方法

    React 中 map 处理异步数据不渲染的问题及解决方法

    文章讲述了在使用React时遇到的异步问题导致页面卡顿的情况,通过Promise.all等方法解决了异步操作的顺序问题,使得页面能够正常渲染,感兴趣的朋友跟随小编一起看看吧
    2026-01-01
  • React状态管理Redux的使用介绍详解

    React状态管理Redux的使用介绍详解

    redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
    2022-09-09
  • React引入css的三种方式小结

    React引入css的三种方式小结

    这篇文章主要介绍了React引入css的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • React router cache route实现缓存页面流程介绍

    React router cache route实现缓存页面流程介绍

    react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持
    2023-01-01
  • react父组件更改props子组件无法刷新原因及解决方法

    react父组件更改props子组件无法刷新原因及解决方法

    使用过vue的朋友都知道，vue父组件更改props的值，子组件是会刷新的，而react就未必，今天通过一个例子给大家介绍react父组件更改props子组件无法刷新原因,需要的朋友可以参考下
    2022-09-09
  • React路由动画切换实现过程详解

    React路由动画切换实现过程详解

    这篇文章主要介绍了react-router 路由切换动画的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2022-12-12
  • React错误边界Error Boundaries

    React错误边界Error Boundaries

    错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树
    2023-01-01

最新评论