怎么在ReactNative里面使用Typescript

今天来搞一搞怎么搭建一个可以使用Typescript的ReactNative环境好吧，一句废话不多说，直接开始好吧

1.全局安装create-react-native-app

yarn global add create-react-native-app

2.create-react-native-app 你的项目名称

例如：create-react-native-app  myApp

　　运行完选择blank回车等待就好

3.cd到你的项目文件夹中，准备安装typeScript依赖

4.安装typeScript依赖

yarn add typescript tslint -D
yarn add @types/react @types/react-native @types/react-dom -D

5.继续安装其他依赖

yarn add concurrently rimraf -D

6.通过tsc --init生成tsconfig.json，或者手动创建一个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
}

7.安装react-native-scripts

yarn add react-native-scripts

8.将package.json中的"scripts"配置清空，并将以下代码替换

"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 "}

9.将package.json中的"main"配置清空替换为以下代码

"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js"

10.将App.js中代码清空，并将以下代码替换

import App from './build/App';
export default App;

11.创建一个src文件夹，将babel.config.js文件放在src文件夹下，同时在src文件夹下创建一个App.tsx文件，App.tsx文件中代码如下

import React, { Component } from "react"
import { View, Text } from "react-native"export default class App extends Component {render() {return(<View><Text>红牛维生素功能饮料</Text></View>
    )}
}

12.执行yarn buildAndStart即可

　　注意在此环境下编写ts文件时，后缀名写为tsx，暂时不知道什么原因，写ts后缀名有问题

　　还有特别注意一下，在此环境导入图片时，用import有问题，只能用require，这个问题暂时不知道原因

更多专业前端知识，请上【猿2048】www.mk2048.com

怎么在ReactNative里面使用Typescript相关推荐

React 技术栈在蚂蚁金服的实践
在2017在线技术峰会"阿里开源项目最佳实践"上,蚂蚁金服前端工程师崔晓斌为大家带来了"React 技术栈在蚂蚁金服的实践"的演讲.主要从研发的模式变迁开始说起 ...
android仿喜马拉雅APP状态栏,ReactNative+TypeScript仿喜马拉雅开发App(示例代码)
ReactNative+TypeScript仿喜马拉雅开发App 融合RN的跨平台能力+TS的全新开发体验使用RN + TS开发听书App,从需求分析,到功能实现,一步步带领大家完成功能,学会如何解 ...
ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...
react-native init MyProject之后发生了什么
使用了React-Native cli里index.js提到的yarn,版本号1.17.3: 所有的依赖和完整输出: $ react-native init MyProject This will w ...
typescript语法高亮插件_vscode常用插件
插件介绍 HTML Snippets > 初级H5代码片段及提示 HTML CSS Support > 初级H5代码片段及提示 Debugger for Chrome > 让 vsc ...
React-Native 组件开发方法
前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...
安装scss_React Native + Typescript + Scss开发配置过程
React Native + Typescript + Scss开发配置过程开发工具 Visual Studio Code React Native Tools扩展 Typescript支持入口文 ...
使用TypeScript命令行工具 tsc CLI
使用TypeScript命令行工具 tsc CLI 李俊才的个人博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?s ...
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
文章目录一.简介二.Vue2和Vue3区别三.Vue知识点学习四.TypeScript知识点一.JavaScript和TypeScript 二.TypeScript的安装和使用 1.Type ...

怎么在ReactNative里面使用Typescript

怎么在ReactNative里面使用Typescript相关推荐

最新文章

热门文章