react native配置路徑別名alias過程
更新時(shí)間：2026年03月15日 10:27:20 作者：好巧.
文章介紹了如何在React Native項(xiàng)目中使用TypeScript進(jìn)行開發(fā),包括安裝依賴、配置babel.config.js、創(chuàng)建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 (可選項(xiàng))
這一步 ts 項(xiàng)目才需要，js 項(xiàng)目直接看下一步
{
"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
總結(jié)
如果本篇文章對你有幫助的話，很高興能夠幫助上你。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
虛擬列表，其實(shí)就是將一個(gè)原本需要全部列表項(xiàng)的渲染的長列表，改為只渲染可視區(qū)域內(nèi)的列表項(xiàng)，但滾動效果還是要和渲染所有列表項(xiàng)的長列表一樣。本文就將利用React實(shí)現(xiàn)虛擬列表，需要的可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了React中常見的三種路由處理方式該如何選擇,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟
本篇文章主要介紹了詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
React倒計(jì)時(shí)功能實(shí)現(xiàn)代碼——解耦通用
這篇文章主要介紹了React倒計(jì)時(shí)功能實(shí)現(xiàn)——解耦通用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了React八大常見錯(cuò)誤及其解決方案,并通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)react有一定的幫助,感興趣的朋友可以參考下2024-03-03
react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解
這篇文章主要介紹了React jsx轉(zhuǎn)換與createElement使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React新擴(kuò)展函數(shù)setState與lazyLoad及hook介紹
這篇文章主要介紹了React新擴(kuò)展函數(shù)setState與lazyLoad及hook，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
在現(xiàn)代Web開發(fā)中,React作為一種流行的JavaScript庫,為開發(fā)者提供了一種高效構(gòu)建用戶界面的方式,條件渲染是React中的一個(gè)關(guān)鍵概念,本文將深入探討如何在React中實(shí)現(xiàn)條件渲染,并通過示例代碼演示常見的用法,需要的朋友可以參考下2025-01-01