Open yu-style666 opened 5 years ago
doc:React Native 中文网 --> 搭建开发环境
1.初始化新项目,执行命令
$ react-native init NewProject
2.修改 package.json 文件,例如:
{ "name": "NewProject", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "run-ios": "react-native run-ios --simulator=\"iPhone 8\"", "run-ipad": "react-native run-ios --simulator=\"iPad Pro (9.7-inch)\"", "run-android": "react-native run-android", "react-devtools": "react-devtools", "test": "jest", "eslint-init": "eslint --init", "eslint-check": "eslint --print-config .eslintrc.json | eslint-config-prettier-check", "lint": "eslint --ext .js --ext .jsx ./src --fix", "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": ["prettier --write", "git add"] }, "dependencies": { "lodash": "^4.17.10", "luxon": "^0.5.6", "moment": "^2.22.2", "nzh": "^1.0.3", "prop-types": "^15.6.1", "react": "16.2.0", "react-native": "0.53.0", "react-native-calendars": "^1.17.6", "react-native-keyboard-aware-scroll-view": "^0.5.0", "react-native-offline": "^3.7.3", "react-native-phone-call": "^1.0.4", "react-native-picker": "^4.3.5", "react-native-swiper": "^1.5.13", "react-navigation": "^1.2.1", "react-navigation-redux-helpers": "^1.0.3", "react-redux": "^5.0.7", "redux": "^3.7.2", "redux-saga": "^0.16.0" }, "devDependencies": { "babel-eslint": "^8.2.2", "babel-jest": "22.4.1", "babel-preset-react-native": "4.0.0", "eslint": "^4.18.1", "eslint-config-airbnb": "^16.1.0", "eslint-config-prettier": "^2.9.0", "eslint-plugin-import": "^2.9.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.7.0", "eslint-plugin-react-native": "^3.2.1", "eslint-plugin-standard": "^3.0.1", "husky": "^0.14.3", "jest": "22.4.2", "lint-staged": "^7.0.0", "prettier": "^1.10.2", "react-devtools": "^3.1.0", "react-test-renderer": "16.2.0" }, "jest": { "preset": "react-native" }, "main": "index.js", "repository": { "type": "git", "url": "xxx" }, "keywords": [], "author": "", "license": "ISC", "description": "" }
3.重装 node 包
$ yarn
4.运行项目
$ react-native run-ios
Loading dependency graph, done. error: bundling failed: Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/Users/xxxx/Documents/workspace/xxxx/NewProject"
{ "presets": ["module:metro-react-native-babel-preset"] }
改成:
{ "presets": ["react-native"] }
重新执行
运行成功
1.初始化新项目,执行命令
2.修改 package.json 文件,例如:
3.重装 node 包
4.运行项目
注意:我当时 run-ios 的时候报错
fix:把根目录的 .babelrc 文件原来的内容:
改成:
重新执行
运行成功