react native ts环境搭建
Posted luxinyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react native ts环境搭建相关的知识，希望对你有一定的参考价值。
react native编写原生应用，不仅可以编写android，还可以编写ios，使得我们的编程，变得更加的简洁，那其实搭建react native环境是非常简单的，随着互联网的发展，那对于编写的规范也变得更加的严格，比如说，出现的typescript，但是给编程也带来一些麻烦，比如，实现同样一个功能，我们需要写更多的代码，但优点也是很多的
1、使其更易于阅读和调试。
2、为我们提供了ES6（ECMAScript 6）的所有优点，以及更高的工作效率。
3、可以帮助我们避免开发人员通过类型检查代码编写javascript时经常遇到的痛苦错误。
等等，还有很多优点，小编就不一一介绍了
下面介绍react+ts环境搭建
①yarn global add create-react-native-app
②create-react-native-app 项目名称
③yarn add typescript tslint -D
④yarn add @types/react @types/react-native @types/react-dom -D
⑤yarn add concurrently rimraf -D
⑥yarn add ts-jest @types/jest @types/react-test-renderer -D
⑦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": false,
"noUnusedParameters": false,
"noImplicitReturns": true,
"skipLibCheck": true,
"moduleResolution": "Node",
"baseUrl": "./",
"paths": {
"assets": ["./assets"]
}
},
"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",
"assets"
],
"compileOnSave": false
}
⑨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 "
}
package.json文件的另一处配置
"main":"./node_modules/react-native-scripts/build/bin/crna-entry.js"
下面就可以创建自己的应用啦
希望对您有帮助！！！！！！！！！
|
{ |
|
|
"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 |
|
|
} |
以上是关于react native ts环境搭建的主要内容，如果未能解决你的问题，请参考以下文章
React Native开发 - 搭建React Native开发环境