一. RN-TS环境搭建
. 安装RN脚手架
yarn add create-react-native-app -g
yarn global add typescript
. 创建项目文件夹
create-react-native-app RN-TS
. 进入文件夹
cd RN-TS
. 安装包
yarn add typescript tslint @types/react @types/react-native @types/react-dom -D
. 在项目目录下运行 tsc --init命令生成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
} . 安装yarn add concurrently rimraf react-native-script -D,之后将以下代码替换掉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 . 将App.js里的内容替换为
import App from './build/App'
export default App . 在项目下新建src目录,并把babel.config.js放在src文件夹下 . 在src下新建一个App.tsx文件拷入以下代码,然后运行yarn buildAndStart
import React, { Component } from "react"
import { View, Text } from "react-native" export default class App extends Component {
render() {
return(
<View>
<Text>hello</Text>
</View>
)
}
}
11. 打开你手机端的expo软件扫描出现的二维码,如果手机上出现hello,说明环境搭建成功了

reac-native + typescript 的环境搭建的更多相关文章

  1. 第二章 TypeScript 开发环境搭建

    Mac OS X 下 TypeScript 开发环境搭建 一.集成开发环境 WebStrom VSCode 二.安装 TypeScript Homebrew(macOS 缺失的软件包管理器) ruby ...

  2. React Native IOS ---基础环境搭建(前端架构师)

    React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...

  3. TypeScript + Webpack 环境搭建

    TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...

  4. TypeScript开发环境搭建(Visual studio code)

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  5. 1、手把手教React Native实战之环境搭建

    React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk    在墙的环境下,为了 ...

  6. React Native - 认识与环境搭建

    01 传统开发的痛点 1.人员稀缺 2.开发成本高 3.代码复用率低 4.无法动态更新 02 React Native的优点 1.跨平台 2.性能高 3.低投入 4.支持动态更新 03 开发环境搭建 ...

  7. React Native For Android 环境搭建

    一. 环境搭建 1. JDK更新 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 使用最新的 ...

  8. React Native MAC上环境搭建笔记

    今天花了一点时间搭建了一下react native环境,在这个过程中遇到了一些问题,处理并总结一下,年纪大了记性不好,只能多写写...真是岁月不饶人啊! 第一步:安装最新版本的Xcode工具 第二步: ...

  9. React Native学习(一) 环境搭建

    需安装工具 RN环境: [必须] Node [必须] react-native-cli [可选] Node Package Manager(npm):node包管理工具,一般安装Node会带上npm ...

随机推荐

  1. JAVA数据结构之哈希表

    Hash表简介: Hash表是基于数组的,优点是提供快速的插入和查找的操作,编程实现相对容易,缺点是一旦创建就不好扩展,当hash表被基本填满的时候,性能下降非常严重(发生聚集引起的性能的下降),而且 ...

  2. Java 基础 - 原生类型

    更详细的说明,请参考: Java 原生类型与包装器类型深度剖析,https://blog.csdn.net/justloveyou_/article/details/52651211 一. 原生类型与 ...

  3. 基于vue的环信基本实时通信功能

    本篇文章借鉴了一些资料,然后在这个基础上,我将环信的实现全部都集成在一个组件里面进行实现: https://blog.csdn.net/github_35631540/article/details/ ...

  4. 尚学linux课程---5、linux操作系统介绍

    尚学linux课程---5.linux操作系统介绍 一.总结 一句话总结: centos开源免费,用的特别多 1.库是什么意思? 没有执行入口的应用程序 2.linux和window下的动态库文件是什 ...

  5. System.Web.Mvc.Filters.IAuthenticationFilter.cs

    ylbtech-System.Web.Mvc.Filters.IAuthenticationFilter.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Cultu ...

  6. Hdu-1452-Happy 2004-费马小定理推除法逆元+同余定理+积性函数

    Consider a positive integer X,and let S be the sum of all positive integer divisors of 2004^X. Your ...

  7. 论文阅读-(ECCV 2018) Second-order Democratic Aggregation

    本文是Tsung-Yu Lin大神所作(B-CNN一作),主要是探究了一种无序的池化方法\(\gamma\) -democratic aggregators,可以最小化干扰信息或者对二阶特征的内容均等 ...

  8. 一个很笨的方法,写脚本来实现自动调dmp,找有用的数据

    很久很久以前用到的方法, 方法挺笨的,但是算是比较实用吧. 全自动的调试dmp,最后只要结果. 谁用得着就给谁看吧. 这里需要两个脚本 1:启动脚本,是一个批处理文件,用来启动调试器,来加载dmp和调 ...

  9. UMP系统架构 LVS

  10. JS流程控制语句 重复重复(for循环)语句结构: for(初始化变量;循环条件;循环迭代) { 循环语句 }

    重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...