紅聯Linux門戶
Linux幫助

使用TypeScript開發React Native應用示例教程

發布時間:2019-05-26 00:00:00來源:未知作者:admin

創建一個示例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 --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": 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.jsApp.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

注:好了,到此,你的項目應該已經運行起來了,有任何疑問,歡迎留言。

贵州体彩11选5查询号码 15选5奖金额表 河北快三豹子怎么追 现金娱乐 黑龙江22选5走势图2元网 重庆时时彩软件 宁夏11选5手机版 pk10计划软件苹果系统 够力排列5奖表长条下载 贵州11选5任四遗漏 贵州快三开奖结果50期