脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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操作真实DOM实现动态吸底部的示例

    React操作真实DOM实现动态吸底部的示例

    本篇文章主要介绍了React操作真实DOM实现动态吸底部的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React教程之Props验证的具体用法（Props Validation）

    React教程之Props验证的具体用法（Props Validation）

    这篇文章主要介绍了React教程之Props验证的具体用法（Props Validation），非常具有实用价值，需要的朋友可以参考下
    2017-09-09
  • React Diff原理深入分析

    React Diff原理深入分析

    这篇文章主要介绍了React Diff原理的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
    2021-04-04
  • React项目中decorators装饰器报错问题解决方案

    React项目中decorators装饰器报错问题解决方案

    这篇文章主要介绍了React项目中decorators装饰器报错，本文给大家分享问题所在原因及解决方案，通过图文实例相结合给大家介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • React Router6.x路由表封装的两种写法

    React Router6.x路由表封装的两种写法

    本文主要介绍了React Router6.x路由表封装的两种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • antd踩坑之javascriptEnabled配置方式

    antd踩坑之javascriptEnabled配置方式

    这篇文章主要介绍了antd踩坑之javascriptEnabled配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React Native react-navigation 导航使用详解

    React Native react-navigation 导航使用详解

    本篇文章主要介绍了React Native react-navigation 导航使用详解，详解的介绍了react-navigation导航的使用，具有一定的参考价值，有兴趣的可以了解一下
    2017-12-12
  • 使用 React Hooks 重构类组件的示例详解

    使用 React Hooks 重构类组件的示例详解

    这篇文章主要介绍了如何使用 React Hooks 重构类组件,本文就来通过一些常见示例看看如何使用 React Hooks 来重构类组件，需要的朋友可以参考下
    2022-07-07
  • 详解如何在React中监听鼠标事件

    详解如何在React中监听鼠标事件

    React可以通过使用React事件系统来监听鼠标事件,您可以在React组件中通过使用特定的事件处理函数来注册和处理鼠标事件,本文小编讲给大家详细介绍一下如何在React中监听鼠标事件,需要的朋友可以参考下
    2023-09-09
  • React路由中的redux和redux知识点拓展

    React路由中的redux和redux知识点拓展

    这篇文章主要介绍了React路由中的redux和redux知识点拓展，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的朋友可以参考学习一下
    2022-08-08

最新评论