react native ts環境搭建
react native編寫原生應用，不僅可以編寫android，還可以編寫ios，使得我們的程式設計，變得更加的簡潔，那其實搭建react native環境是非常簡單的，隨著網際網路的發展，那對於編寫的規範也變得更加的嚴格，比如說，出現的typescript，但是給程式設計也帶來一些麻煩，比如，實現同樣一個功能，我們需要寫更多的程式碼，但優點也是很多的
1、使其更易於閱讀和除錯。
2、為我們提供了ES6（ECMAScript 6）的所有優點，以及更高的工作效率。
3、可以幫助我們避免開發人員通過型別檢查程式碼編寫JavaScript時經常遇到的痛苦錯誤。
等等，還有很多優點，小編就不一一介紹了
下面介紹react+ts環境搭建
①yarn global add create-react-native-app
②create-react-native-app 專案名稱
③yarn add typescript tslint -D
④yarn add @types/react @types/react-native @types/react-dom -D
⑤yarn add concurrently rimraf -D
⑥yarn add ts-jest @types/jest @types/react-test-renderer -D
⑦tsc --init 生成tsconfig.json檔案
⑧下面附上tsconfig.json 檔案的配置
{
"compilerOptions": {
"module":"es2015",
"target": "es2015",
"jsx": "react",
"rootDir": "src",
"outDir": "build",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"sourceMap": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"allowJs": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"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
}
⑨yarn add react-native-scripts
⑩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.json檔案的另一處配置
"main":"./node_modules/react-native-scripts/build/bin/crna-entry.js"
下面就可以建立自己的應用啦
希望對您有幫助！！！！！！！！！
| { |
|
| "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" |
|
| }, |
|
| "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" |
|
| ], |
|
| "compileOnSave":false |
|
| } |