码迷,mamicode.com
首页 > 其他好文 > 详细

react native ts环境搭建

时间:2018-12-01 21:48:17      阅读:196      评论:0      收藏:0      [点我收藏+]

标签: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"

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

  希望对您有帮助!!!!!!!!!

 

 

 

 

 

 

{

 

"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

 

}

 

react native ts环境搭建

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!