内容简介:创建一个示例RN应用程序,从Expo的create-react-native-app(CRNA)开始,并将其配置为使用Typescript开发我们的RN代码。打开终端,并cd选择您的工作文件夹。运行以下命令以创建新的React Native项目:在此命令中,CRNA将为您构建一个非常基本但可立即运行的React Native应用程序。一旦应用程序创建,cd以创建应用程序的项目文件夹,并确保通过CRNA脚手架基本初始应用程序正在工作。
创建一个示例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弹出”, “<a href="https://www.linuxidc.com/topicnews.aspx?tid=11" target="_blank" title="Android">Android</a>”:“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
注:好了,到此,你的项目应该已经运行起来了,有任何疑问,欢迎留言。
Linux公社的RSS地址 : https://www.linuxidc.com/rssFeed.aspx
本文永久更新链接地址: https://www.linuxidc.com/Linux/2019-05/158790.htm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- ThreadLocal类之简单应用示例
- 深入理解MPLS标签动作及应用示例
- 深入讲解Flutter应用模板源码:计数器示例
- Python实现对一个函数应用多个装饰器的方法示例
- SpringBoot应用篇之FactoryBean及代理实现SPI机制示例
- 基于 Redux + Redux Persist 进行状态管理的 Flutter 应用示例
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Probability and Computing: Randomization and Probabilistic Techn
Michael Mitzenmacher、Eli Upfal / Cambridge University Press / 2017-7-3 / USD 62.23
Greatly expanded, this new edition requires only an elementary background in discrete mathematics and offers a comprehensive introduction to the role of randomization and probabilistic techniques in m......一起来看看 《Probability and Computing: Randomization and Probabilistic Techn》 这本书的介绍吧!