react native配置路径别名alias过程
更新时间：2026年03月15日 10:27:20 作者：好巧.
文章介绍了如何在React Native项目中使用TypeScript进行开发,包括安装依赖、配置babel.config.js、创建tsconfig.json文件、使用@别名引入src文件夹下的文件,并展示了效果图
前言
本文基于
- “react-native”: “^0.70.1”
1.安装依赖
yarn add babel-plugin-module-resolver --save
2.配置 babel.config.js
plugins: [
[
'module-resolver',
{
root: ['./src'],
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'@': ['./src']
}
}
]
]
3.根目录新建 tsconfig.json (可选项)
这一步 ts 项目才需要，js 项目直接看下一步
{
"compilerOptions": {
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
},
"include": ["src"],
"exclude": ["node_modules"]
}
4.使用
新建 src 文件夹，使用 @ 别名引入 src 文件夹下的文件
5.效果图
yarn android
总结
如果本篇文章对你有帮助的话，很高兴能够帮助上你。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
我们在后台管理系统React项目开发中会有Table表格、Form表单、List列表、Button按钮等组件，这个时候我们可以使用AntDesign来减少开发中不必要的样式问题，本文就介绍了eact项目中使用AntDesign，感兴趣的可以了解一下2022-04-04
这篇文章主要给大家介绍了关于react-native滑动吸顶效果的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用react-native具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家介绍了React虚拟渲染实现50个或者100个图表渲染的实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了在react中使用vue的状态管理的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点。diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用2022-11-11
这篇文章主要介绍了React组件refs的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了使用React-Router实现前端路由鉴权的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了详解React 在服务端渲染的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
在 React中是不存在双向数据绑定的机制的，需要我们自己对其进行实现。本文主要介绍一下React双向数据绑定，感兴趣的可以了解一下2021-11-11
这篇文章主要为大家介绍了ReactJS中不同类型的状态详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论