yu-style666 / Blog

技术沉淀
1 stars 0 forks source link

RN 项目初始化 #13

Open yu-style666 opened 5 years ago

yu-style666 commented 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

注意:我当时 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"

fix:把根目录的 .babelrc 文件原来的内容:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

改成:

{
  "presets": ["react-native"]
}

重新执行

$ react-native run-ios

运行成功