react native ts环境搭建

  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

 
}

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

时间: 2024-10-11 20:41:23

react native ts环境搭建的相关文章

React Native iOS环境搭建

前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废话不多说了,下面简单的列出步骤吧. 1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/i

mac 下 react Native android环境搭建

1.参考  上一篇的博客文章 "mac 下 react Native ios环境搭建",前面几步都是必须的,只是,原生客户端不一致 2.Android Studio的安装 A:安装JAVA的SDK 注意:Android Studio需要Java Development Kit [JDK] 1.8或更高版本.你可以在命令行中输入 javac -version来查看你当前安装的JDK版本.如果版本不合要求,可以到 官网上下载 B:除非特别注明,请不要改动安装过程中的选项.比如Android

Windows下的 React Native 的环境搭建

感觉react好难QAQ 一.开发环境搭建要求 在Windows操作系统搭建React Native开发环境要求在电脑上安装好JDK,Android SDK,还要求电脑上安装有一套C++编译器,如果没有,推荐安装微软的VIsual Studio Community 2015 二.环境搭建 1.安装JDK(需安装1.8或更高版本) 下载对应你电脑版本的32位或64位JDK,第一次是JDK,第二次是jre,建议安装到同一个文件夹下的不同文件夹中.安装时可以修改安装目录. 2.JDK环境变量配置 (1

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

Android React Native 开发环境搭建---windows下

环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以看官方的地址,本文只是我个人的实践,并且仅限于window平台. 官方的地址:https://facebook.github.io/react-native/docs/getting-started.html 1.下载Chocolatey 去官网下载,一般没有问题. 2.Node,python2,j

react native的环境搭建中常见问题

搭建完成android的环境,我们就可以继续我们的react native环境的搭建了. 当然,按照fb的安装流程来完成rn的搭建. http://facebook.github.io/react-native/docs/getting-started.html 1.install python2 一定要安装python2.X.X的版本,切记不要安装pythn3+以上的. 2.rn的安卓sdk要是23.0.1,要不然会报在目录下找不到对应的sdk. 3.在目录下无法找到local.propert

React Native开发环境搭建

安装Xcode 安装Homebrew 检查是否有警告 安装Android SDK 安装flow和watchman 安装nodejs 安装react-native-cli 安装Genymotion 安装Webstorm 10 创建React Native空项目 使用Webstorm编辑JSX代码文件 在iOS模拟器中运行 在Android模拟器中运行 安装Xcode 从App Store搜索下载.需要Apple Id账号. 安装Homebrew 打开Terminal,执行以下命令即可安装.详情请参

Window平台下React Native 开发环境搭建

1. 安装Node.js 2. 安装react-nativew-cli 命令行工具 npm install -g react-nativew-cli 3. 创建项目 $ react-native init appSmaple 4. 运行 $ cd appSmaple$ react-native start 5. 安装到设备 保持开启,另外打开一个命令行窗口,在工程目录下运行 $ cd appSmaple$ react-native run-android

搭建React Native开发环境遇到的几个问题

根据http://blog.csdn.net/itpinpai/article/details/50809068这篇文章初步搭建React Native 开发环境, 遇到几个问题 首先端口可能被占用了, 访问8081时提示无法访问 解决方法: 在运行react-native start时添加参数--port 8899, 或者在package.json中修改"scripts"中参数, 添加端口号, 或者修改项目下的node_modules\react-native\local-cli\s