reac-native + typescript 的环境搭建
一. 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 的环境搭建的更多相关文章
- 第二章 TypeScript 开发环境搭建
Mac OS X 下 TypeScript 开发环境搭建 一.集成开发环境 WebStrom VSCode 二.安装 TypeScript Homebrew(macOS 缺失的软件包管理器) ruby ...
- React Native IOS ---基础环境搭建(前端架构师)
React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...
- TypeScript + Webpack 环境搭建
TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...
- TypeScript开发环境搭建(Visual studio code)
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
- 1、手把手教React Native实战之环境搭建
React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk 在墙的环境下,为了 ...
- React Native - 认识与环境搭建
01 传统开发的痛点 1.人员稀缺 2.开发成本高 3.代码复用率低 4.无法动态更新 02 React Native的优点 1.跨平台 2.性能高 3.低投入 4.支持动态更新 03 开发环境搭建 ...
- React Native For Android 环境搭建
一. 环境搭建 1. JDK更新 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 使用最新的 ...
- React Native MAC上环境搭建笔记
今天花了一点时间搭建了一下react native环境,在这个过程中遇到了一些问题,处理并总结一下,年纪大了记性不好,只能多写写...真是岁月不饶人啊! 第一步:安装最新版本的Xcode工具 第二步: ...
- React Native学习(一) 环境搭建
需安装工具 RN环境: [必须] Node [必须] react-native-cli [可选] Node Package Manager(npm):node包管理工具,一般安装Node会带上npm ...
随机推荐
- python中的 += 语法的使用
python中有个缩略的写法,如下 a = a +1 等同于 a +=1 发现了一个有趣之处,+=的写法中间不能有空格,否则报错,测试如下 Python 3.7.1 (v3.7.1:260ec2c36 ...
- mySql搜索引擎
转载自 深入浅出mysql数据库 MySQL5.5以后默认使用InnoDB存储引擎,其中InnoDB和BDB提供事务安全表,其它存储引擎都是非事务安全表. 若要修改默认引擎,可以修改配置文件中的def ...
- 学习servlet之路--javax-servlet不存在
我在编译一个servlet菜鸟教程下提供的包含有javax.servlet包的java文件,变异出错, import java.io.*;import javax.servlet.*;import j ...
- 自定义Collection View布局
转自answer-huang的博客 原文出自:Custom Collection View Layouts UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一颗 ...
- PAT甲级——A1124 Raffle for Weibo Followers
John got a full mark on PAT. He was so happy that he decided to hold a raffle(抽奖) for his followers ...
- 7_3.springboot2.x启动配置原理_3.事件监听机制
事件监听机制配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunListenerioc容器中的 ...
- USACO 2007 February Silver The Cow Lexicon /// DP oj24258
题目大意: 输入w,l: w是接下来的字典内的单词个数,l为目标字符串长度 输入目标字符串 接下来w行,输入字典内的各个单词 输出目标字符串最少删除多少个字母就能变成只由字典内的单词组成的字符串 Sa ...
- 菲波那切数列(Fibonacci Number)
什么是菲波那切数列?自己google一下,面试题里面经常遇到,考试递归算法用的. 在菲波那切数列中用递归不太好.第三种算法最好. 第一 递归算法最差了,不想说.测试一下,当N=6000时,半天出不来数 ...
- shell脚本练习05
######################################################################### # File Name: -.sh # Author ...
- MySQL5.1的安装过程
开始配置文件