怎么在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，这个问题暂时不知道原因