如何在React-Native上使用Typescript
2018-11-30 08:41
344 查看
首先安装脚手架:
$ yarn global add create-react-native-app
创建项目:
create-react-native-app xxx
进入项目并启动:
cd xxx yarn start
如果不用ts,现在就可以正常使用了
毕竟要用ts,还得折腾一番:
安装依赖
yarn add typescript tslint -D yarn add @types/react @types/react-native @types/react-dom -D
我们还需要rimraf,并发地清理从ts编译过来的js文件的输出文件夹,并发地运行npm脚本:
yarn add concurrently rimraf -D
设置Typescript config (tsconfig.json)使用tsc命令,或者在项目文件夹中手动创建。
tsc --init
需要在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 }
需要注意一些细节:
我们希望将Typescript应用程序的所有代码存储在src文件夹下的文件夹/子文件夹中。用“rootDir”:“src“,确保你的根目录为src或者也可以手动更改
并把babel.config.js文件扔到这个文件夹内
然后安装依赖:
yarn add react-native-scripts
将package.json中的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 "
将main更改为:
"main":"./node_modules/react-nativescripts/build/bin/crna-entry.js"
这意味着我们的应用程序从这个crna-entry.js 开始。打开这个文件,你会发现它引用了我们的App.js
var _App = require('../../../../App');
这意味着它希望app模块位于项目根目录下的app .js 文件中。
ts编译器将会在build文件夹下输出编译过后的.js文件
因此,为了让CRNA能够处理我们已经更改的文件夹结构和Typescript配置,让我们在项目文件夹下添加一个App.js ,它将在src/App中导出我们的App组件。Typescript编译器将输出到build文件夹。
在项目根目录添加一个app.js文件:
import App from './build/App'; export default App;
注意创建typescript文件后缀为.tsx
运行命令即可
yarn buildAndStart
相关文章推荐
- react-native 0.43 后如何使用自己的OkHttpClient
- React Native获取移动设备信息(react-native-device-info)如何使用?
- 使用Visual Studio Code和typescript 开发调试React Native项目
- Andriod如何使用react-native-vector-icons
- React Native如何使用 code-push 热更新
- React Native 中如何使用Android的第三方控件以Android的弹幕为例
- Android中使用react-native框架中的View组件如何使其中的文本换行
- 在Android 2.3中如何使用native_activity.h编写本地应用
- ASP.NET MVC 例子演示如何在 Knockout JS 的配合下,使用 TypeScript 。
- 学习React-Native(一):学习React,使用模块加载器webpack
- An iOS Developer on React Native一个资深iOS开发者对于React Native具体使用体验
- Android React Native的使用细节问题
- react-native使用flux
- react native viewpager 使用问题
- 如何评价ionic和react native?
- React Native Android 使用友盟SDK功能
- React Native:使用 JavaScript 构建原生应用 详细剖析
- 一个简单的 ASP.NET MVC 例子演示如何在 Knockout JS 的配合下,使用 TypeScript 。