您的位置:首页 > Web前端 > React

使用TypeScript开发React Native应用示例教程

2019-05-21 00:00 1821 查看

创建一个示例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.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

注:好了,到此,你的项目应该已经运行起来了,有任何疑问,欢迎留言。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐