怎么在ReactNative里面使用Typescript

React 2019-03-01

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

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

yarn global add create-react-native-app

名称

例如：create-react-native-app  myApp

文件夹中，准备安装typeScript依赖

5.继续安装其他依赖

6.通过tsc --init生成tsconfig.json，或者手动创建一个tsconfig.json，将下面代码拷入该文件

"compilerOptions""module":"es2015""target": "es2015""jsx": "react""rootDir": "src""outDir": "build""allowSyntheticDefaultImports": "noImplicitAny": "sourceMap": "experimentalDecorators": "preserveConstEnums": "allowJs": "noUnusedLocals": "noUnusedParameters": "noImplicitReturns": "skipLibCheck": "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' App;

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

import React,{ Component } from "react""react-native"export default class App extends Component {
render() {
return(

红牛维生素功能饮料

12.执行yarn buildAndStart即可

　　文件时，后缀名写为tsx，暂时不知道什么原因，写ts后缀名有问题

　　图片时，用import有问题，只能用require，这个问题暂时不知道原因

react使用moment进行日期格式化

导入moment 使用方式年月日，时分秒星期几相对时间 7天后 2小时后明天将毫秒转换成年月日

推荐使用并手写实现redux-actions原理

@ 一、前言为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前的大佬在处理...

【译】值得推荐的十大React Hook 库

十大React Hook库原文地址：https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...

React生命周期

React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命周期中提供很...

React虚拟DOM的理解

React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其称为VNode，用...

React中JSX的理解

React中JSX的理解 JSX是快速生成react元素的一种语法，实际是React.createElement(component, props, ....

怎么在ReactNative里面使用Typescript

相关文章