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 ...
随机推荐
- vue组件的props
刚开始学习vue组件的时候经常被 props这个传值搞晕,做个笔记 Vue.component('item', { template: '#item-template', props: { model ...
- [JZOJ4331] 【清华集训模拟】树
题目 题目大意 给你一棵带点权的树,求将树变成一堆不相交的链,而且这些链的权值和非负的方案数. 正解 显然这道题是个\(DP\). 首先求个前缀和\(sum\). 为了后面讲述方便,我这样设:\(f_ ...
- JavaScript - DOM相关
DOM节点分类 ( node ) : 元素节点 ( element node ) 属性节点 ( attribute node ) 文本节点 ( text node) DOM的相关操作 : 1. 查询元 ...
- rancher v2.2.4创建kubernetes集群出现[etcd] Failed to bring up Etcd Plane: [etcd] Etcd Cluster is not healthy
主机:rancher(172.16.2.17),master(172.16.2.95),node01(172.16.2.234),node02(172.16.2.67) 问题:开始是用的rancher ...
- linux安装PyCharm,PyCharm常用快捷键及调试模式,pycharm里面对文件夹或者文件进行重命名
PyCharm常用快捷键及调试模式 2017年10月18日 23:13:43 菜鸟之神 阅读数:5835 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn ...
- VS2010-MFC(MFC常用类:CFile文件操作类)
转自:http://www.jizhuomi.com/software/234.html CFile类概述 如果你学过C语言,应该知道文件操作使用的是文件指针,通过文件指针实现对它指向的文件的各种操作 ...
- svn+post-commit实现自动部署(转)
一.安装 #yum install subversion 检查是否安装了svn #subversion –v 创建svn库和对应的目录 #mkdir /svn/www.test.com #svnadm ...
- 18-1-函数中this的指向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bigcolorpicker 颜色拾取器插件——例
参考:http://bigui4.sinaapp.com/picker/colorpicker.html 效果: html: <!DOCTYPE html> <html> &l ...
- MFC入门--显示静态图片及调用本地软件
MFC是微软开发的基础类库,主要用来开发图形界面应用程序,在学习中,我们要验证算法好坏,一般需要对结果进行可视化. OpenCV是计算机视觉中的开源算法库,集成了很多先进算法,现在想将MFC与Open ...