一. 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. ctx.beginPath()开始新路径

    beginPath() 方法开始一条路径,或重置当前的路径. 提示:请使用这些方法来创建路径 moveTo().lineTo().quadricCurveTo().bezierCurveTo().ar ...

  2. 引用数据类型 Scanner Random

    Scanner类 数据类型  变量名  =  new 数据类型(); 每种引用数据类型都有其功能,我们可以调用该类型实例的功能. 变量名.方法名(); Scanner类是引用数据类型的一种,我们可以使 ...

  3. VC++ COMBO BOX控件的使用

    1.你在编辑状态下点那个控件的向下的三角形,就出冒出来一个可以调高度的东东.将高度调高,否则在执行时会不能显示下拉选项.   2.为combo box添加选项,在编辑状态下选combo box控件的属 ...

  4. Python机器学习的步骤

    原文出处: kdnuggets   译文出处:数据工匠 开始.这是最容易令人丧失斗志的两个字.迈出第一步通常最艰难.当可以选择的方向太多时,就更让人两腿发软了. 从哪里开始? 本文旨在通过七个步骤,使 ...

  5. springboot整合TinyMCE文件上传回显

    今天想尝试TinyMCE富文本,准备着手搭建自己的博客,发现springboot上传文件,如果把文件放在static文件夹不能即时回显,百度了下,说是要刷新文件夹才能解决. 有问题就有解决办法 方法1 ...

  6. 4_4.springboot之Web开发登录和拦截器

    1.登录处理 1).禁用模板引擎的缓存 # 禁用缓存 spring.thymeleaf.cache=false 2).页面修改完用ctrl+f9:重新编译: LoginController @Cont ...

  7. C++的注释

    ### 1.2 注释 **作用**:在代码中加一些说明和解释,方便自己或其他程序员程序员阅读代码 **两种格式** 1. **单行注释**:// 描述信息  - 通常放在一行代码的上方,或者一条语句的 ...

  8. python-包管理工具-pip

    目录 Python pip pip相关命令 解决pip相关问题 Python pip回到顶部 Python最让人的喜欢的就是它有丰富的类库和各种第三方的包,而对于这些包的下载.删除等管理操作,就要用到 ...

  9. python基础语法(变量与数据类型)

    python基础语法(变量与数据类型) 一.python变量 python中的变量不需要声明.每个变量在使用钱都需要赋值,变量赋值以后,该变量才会被创建 在python中,变量就是变量,它没有类型,我 ...

  10. 2019-7-3-如何通过命令行-msbuild-编译项目

    title author date CreateTime categories 如何通过命令行 msbuild 编译项目 lindexi 2019-07-03 19:12:19 +0800 2019- ...