2021-05-12 14:32:11
使用TypeScript開發React Native應用範例教學
2020-06-16 16:35:47
建立一個範例RN應用程式，從Expo的create-react-native-app（CRNA）開始，並將其設定為使用Typescript開發我們的RN程式碼。
1.使用CRNA建立React Native專案
$ yarn global add create-react-native-app開啟終端，並cd選擇您的工作資料夾。執行以下命令以建立新的React Native專案：
create-react-native-app CRNAExpoTSExample在此命令中，CRNA將為您構建一個非常基本但可立即執行的React Native應用程式。一旦應用程式建立，cd以建立應用程式的專案資料夾，並確保通過CRNA腳手架基本初始應用程式正在工作。
2.新增Typescript
安裝依賴項
yarn add typescript tslint -D
yarn add @types/react @types/react-native @types/react-dom -D我們還需要rimraf和concurrently清理ts-transpiled-to-js檔案的輸出資料夾並同時執行npm指令碼
yarn add concurrently rimraf -D設定
tsc --inittsconfig.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": 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
}我們想將所有的Typescript應用程式程式碼檔案儲存在該src資料夾下的資料夾/子資料夾中。使用“rootDir”: “src ，Typescript編譯器將查詢資料夾及其子資料夾中的所有 檔案.ts或 .tsx檔案src。
“outDir”: “build”表示Typescript將在build資料夾下輸出已轉換的Javascript檔案。
新增tslint.json
tslint.json在專案資料夾下新增檔案，其內容如下：
{
"rules": {
"member-access": false,
"member-ordering": [
true,
"public-before-private",
"static-before-instance",
"variables-before-functions"
],
"no-any": false,
"no-inferrable-types": [false],
"no-internal-module": true,
"no-var-requires": true,
"typedef": [false],
"typedef-whitespace": [
true, {
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}, {
"call-signature": "space",
"index-signature": "space",
"parameter": "space",
"property-declaration": "space",
"variable-declaration": "space"
}
],
"ban": false,
"curly": false,
"forin": true,
"label-position": true,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-null-keyword": true,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-switch-case-fall-through": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"radix": true,
"switch-default": true,
"triple-equals": [
true,
"allow-undefined-check"
],
"eofline": false,
"indent": [
true,
"spaces"
],
"max-line-length": [
true,
150
],
"no-require-imports": false,
"no-trailing-whitespace": true,
"object-literal-sort-keys": false,
"trailing-comma": [
true, {
"multiline": "never",
"singleline": "never"
}
],
"align": [true],
"class-name": true,
"comment-format": [
true,
"check-space"
],
"interface-name": [false],
"jsdoc-format": true,
"no-consecutive-blank-lines": [true],
"no-parameter-properties": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-finally",
"check-whitespace"
],
"quotemark": [
true,
"single",
"avoid-escape"
],
"semicolon": [
true,
"always",
"ignore-interfaces"
],
"variable-name": [
true,
"allow-leading-underscore",
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}建立src和build 資料夾
由於我們設定src和build為rootDir和outputDir中tsconfig.json，建立我們專案的根資料夾下這些資料夾。
當我們create-react-native-app CRNAExpoTSExample使用CRNA命令（）建立專案時，它在我們的專案資料夾下新增了一個App.js和App.test.js。這些檔案移動到SRC我們建立的資料夾，然後重新命名App.js，並App.test.js以App.tsx和App.test.tsx分別。
此時，您的專案資料夾和檔案應如下所示：
在package.json中新增一些指令碼
當我們使用CRNA命令建立上面的專案時，package.json它在scaffolded專案資料夾中建立的檔案包含以下指令碼：
...
“scripts”：{
“start”：“react-native-scripts start”，
“eject”：“react-native-scripts彈出”，
“Android”：“react-native-scripts android”，
“ios” ：“react-native-scripts ios”，
“test”：“node node_modules / jest / bin / jest.js”
}
...現在，我們將新增更多指令碼來執行我們的任務來編譯Typescript，建立構建並啟動我們的應用程式：
"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 "在專案的根資料夾下新增App.js
請注意，在package.json最初由CRNA建立的檔案中，app 的“main”入口點設定為：
“main”：“./ node_modules/react-native-scripts/build/bin/crna-entry.js”意味著我們的應用程式從此crna-entry.js 檔案開始。開啟這個檔案，你會發現它參照了我們的App.js檔案：
<span style="color:rgba(0, 0, 0, 0.84)">var _App = require（'../../../../ App'）;</span>這意味著它期望app模組位於App.js我們專案的根資料夾下的檔案中。但是，我們將原始App.js檔案移動到該src資料夾。此外，Typescript編譯器將在該build資料夾下輸出已轉換的ts-to-js檔案。
因此，為了讓CRNA使用我們更改的資料夾結構和我們的Typescript設定，讓我們App.js在專案資料夾下新增一個檔案，該檔案將只匯出我們的App元件src/App.tsx，Typescript編譯器將輸出到該build資料夾。
App.js在專案的根資料夾下建立檔案：
import App from './build/App';
export default App;3.執行我們的應用程式
我們現在都設定為執行我們的Typescript應用程式。執行命令：
yarn run buildAndStart註：好了，到此，你的專案應該已經執行起來了，有任何疑問，歡迎留言。
相關文章