一. 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. eclipse导出说明文档

    选中项目--右键--Export--Java--Javadoc—Finish 1.为程序添加文档注释 2.选中项目--右键Export--Java--Javadoc--next, 3.next--在V ...

  2. robotframework冷门关键字

    1.Reload Page 模拟页面重载 2.Register Keyword To Run On Failure 参数: Keyword 描述: 当Selenium2Library类库关键字执行失败 ...

  3. virtualbox启动虚机报错:The VM session was closed before any attempt to power it on.

    解决方法:   image.png 点击清除即可. 或者在控制>清除保存的状态.然后重启虚机即可!

  4. 【JZOJ6357】小ω的图(graph)

    description analysis 拆位从高位到低位贪心 对于当前位,如果把所有当前位为\(1\)的边塞入,\(1\)和\(n\)连通,则该位必须为\(1\) 这个是因为高位的\(1\)比所有低 ...

  5. matplotlib实现伪彩色图像和色度条的展现

    灰度图显示为伪彩色图 法一 import matplotlib.pyplot as plt img = plt.imread('C:/Users/leex/Desktop/lena.jpg') img ...

  6. 一阶段项目 总结 之 两张图片对比 手写 jquery 也可以使用beer slider 插件

    <!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title> ...

  7. JQUERY(入口函数 选择器)

    入口函数   $(document).ready(function(){ });可以简写为$(function(){}) 选择器 基本选择器 元素选择器   $("p") 所有 & ...

  8. 校园商铺-2Logback配置与使用-3验证配置

    1. 验证logback配置 1.1. 启动tomcat,得到CATALINA_BASE地址: 1.2 访问接口,查看日志 浏览器打开http://localhost:18080/o2o/supera ...

  9. C++ 贪吃蛇二维

    #include <iostream> #include <conio.h> #include <windows.h> #include <time.h> ...

  10. thinkphp 系统流程

    用户URL请求 调用应用入口文件(通常是网站的index.php) 载入框架入口文件(ThinkPHP.php) 记录初始运行时间和内存开销 系统常量判断及定义 载入框架引导类(Think\Think ...