今天来搞一搞怎么搭建一个可以使用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-scripts8.将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
)
)
