当前位置: 首页 > Web前端 > HTML

react-native的路径别名配置

时间:2023-03-29 11:29:00 HTML

1.鍒濆鍖栭」鐩瓹reateaprojectusingreact-nativescaffolding鍒涘缓涓€涓悕涓簉n-demo鐨勯」鐩紝浣跨敤瀹樻柟鐨則ypescript妯℃澘銆俷pxreact-nativeinitrn_demo--templatereact-native-template-typescript娉ㄦ剰锛氶」鐩悕涓嶈兘浣跨敤-瀛楃锛岃剼鎵嬫灦涓嶆敮鎸併€傝繍琛岄」鐩畒arnios鎴杫arnandroid鍒涘缓濡備笅鍥炬墍绀虹殑鏂囦欢锛氭帴涓嬫潵锛屼负src/utils璺緞閰嶇疆涓€涓埆鍚嶃€?.缂栬緫tsconfig.json璁剧疆鍒悕锛岃В鏋?ts鍜?tsx瀵煎叆鏂囦欢鏃剁殑璺緞鍒悕銆倇"extends":"@tsconfig/react-native/tsconfig.json",/*鎺ㄨ崘ReactNativeTSConfig鍩虹*/"compilerOptions":{/*璁块棶https://aka.ms/tsconfig.json闃呰鏇村鍏充簬杩欎釜鏂囦欢*//*瀹屾暣鎬?/"skipLibCheck":true,/*璺宠繃鎵€鏈?d.ts鏂囦欢鐨勭被鍨嬫鏌ャ€?//*閰嶇疆鍩烘湰URL*/"baseUrl":".",/*閰嶇疆璺緞鍒悕*/"paths":{"*":["src/*"],}}}3.娣诲姞babel鎻掍欢-inbabel-plugin-module-resolver鐢ㄤ簬babel鎵撳寘鏃惰В鏋愯矾寰勫埆鍚嶃€傚鏋滀笉閰嶇疆锛岃繍琛岃繃绋嬩細鎶ラ敊锛屾壘涓嶅埌鏂囦欢銆倅arnadd-Dbabel-plugin-module-resolvereditbabel.config.js閰嶇疆鎻掍欢module.exports={presets:['module:metro-react-native-babel-preset'],plugins:[['module-resolver',{root:['./src'],extensions:['.ios.js','.android.js','.js','.ts','.tsx','.json'],鍒悕:{'*':['./src'],},},],],};4.楠岃瘉骞朵慨鏀笰pp.tsx浠ョ紪鍐欐祴璇曚唬鐮侊細importReactfrom'react';import{SafeAreaView,StyleSheet,Text}from'react-native';importmultiplyfrom'utils/multiply';//浣跨敤鍒悕瀵煎叆妯″潡constApp=()=>{return(2*3={multiply(2,3)});};conststyles=StyleSheet.create({wrap:{flex:1,alignItems:'center',justifyContent:'center',},});瀵煎嚭榛樿搴旂敤绋嬪簭锛涜繍琛寉arnstart--reset-cache璁板緱鍔犱笂--reset-cache鏍囧織娓呴櫎缂撳瓨锛屽惁鍒欓厤缃笉浼氱敓鏁堛€傜粨鏋滃弬鑰冿細瀹樼綉鏀荤暐鉂わ笍鏀寔濡傛灉鏈枃瀵规偍鏈夊府鍔╋紝璇风偣璧烉煈嶆敮鎸佹垜銆傛偍鐨勨€滃枩娆⑩€濇槸鎴戝垱浣滅殑鍔ㄥ姏銆?/p>