1. 程式人生 > >react-native 專案配置ts執行環境

react-native 專案配置ts執行環境

#全域性安裝 create-react-native-app

yarn global add create-react-native-app

#建立專案

 create-react-native-app  my-app

#安裝ts依賴

yarn add typescript tslint -D   yarn add @types/react @types/react-native @types/react-dom -D

yarn add concurrently rimraf -D

#在根目錄下建立一個tsconfig.json配置檔案,或者tsc --init生成預設配置檔案再修改,把下面程式碼貼上去

{
"compilerOptions": {
"module":"es2015",
"target": "es2015",
"jsx": "react",
"rootDir": "src",
"outDir": "build",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"sourceMap": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"allowJs": true,
"noUnusedLocals": true,
"
noUnusedParameters": true, "noImplicitReturns": true, "skipLibCheck": true, "moduleResolution": "Node", "baseUrl": "./", "paths": { "assets": ["./assets"] } }, "filesGlob": [ "typings/index.d.ts", "src/**/*.ts", "src/**/*.tsx", "node_modules/typescript/lib/lib.es6.d.ts" ], "types": [ "react", "react-dom", "react-native
" ], "exclude":[ "build", "node_modules", "jest.config.js", "App.js", "assets" ], "compileOnSave": false }

#配置指令碼命令,記得先安裝react-native-script

將下面程式碼配置在package.json中

"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js",
"lint": "tslint src/**/*.ts",
"tsc": "tsc",
"clean": "rimraf build",
"build": "yarn run clean && yarn run tsc --",
"watch": "yarn run build -- -w",
"watchAndRunAndroid": "concurrently \"yarn run watch\" \"yarn run android\"",
"buildRunAndroid": "yarn run build && yarn run watchAndRunAndroid ",
"watchAndRunIOS": "concurrently \"yarn run watch\" \"yarn run ios\"",
"buildRunIOS": "yarn run build && yarn run watchAndRunIOS ",
"watchAndStart": "concurrently \"yarn run watch\" \"yarn run start\"",
"buildAndStart": "yarn run build && yarn run watchAndStart "
},

 

#最後最重要的在package檔案中把入口地址修改 "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js"   #把babel.config檔案放在src下面,在src檔案建立ts檔案,開心的寫專案吧   #yarn buildAndStart啟動服務(複合命令)