react native ts环境搭建

标签：decorator   避免   false   发展   规范   nan   text   turn   uil   

　　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"

　　下面就可以创建自己的应用啦

　　希望对您有帮助！！！！！！！！！

react native ts环境搭建

标签：decorator   避免   false   发展   规范   nan   text   turn   uil   

原文地址：https://www.cnblogs.com/luxinyi/p/10050724.html