在ReactNative中使用Typescript

少侠放心,跟着我的这个步骤走,保你完美在RN项目中使用Typescript,废话不多说,走你

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

yarn globaladd create-react-native-app

2.创建项目

create-react-native-app projectname(你的项目名字)

3.cd到你的项目文件夹中

4.安装typescript依赖

yarnadd typescript tslint -Dyarnadd @types/react @types/react-native @types/react-dom -D

5.安装其他依赖

yarnadd concurrently rimraf -Dyarnadd ts-jest @types/jest @types/react-test-renderer -D

6.在你的项目根目录下创建一个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

yarnadd 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中代码清空,并将以下代码替换

importAppfrom'./build/App';exportdefaultApp;

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

importReact, {Component} from"react"import{View,Text} from"react-native"exportdefaultclassAppextendsComponent{  render() {return(              不成功加我qq:291678978,手把手教学好吧          )  }}

12.执行命令:yarn buildAndStart,然后静静的等待运行成功,用你伟大的expo扫描成功的二维码就可以看到伟大的胜利;注:如果想在浏览器看到你的二维码,可再单独执行一下yarn start

然后就可以很开心的在项目里写TypeScript代码了,例如项目中tsx目录下有test.tsx文件,我们在import这个文件时,就像import一个js文件就可以了(注:ts文件后缀名ts和tsx都可以,不过在当前环境下后缀名写成ts好像有问题,如果有问题的话将后缀名改成tsx即可,亲测有效)

import'./tsx/test'

你可能感兴趣的:(在ReactNative中使用Typescript)