React Native 环境搭建 — macOS开发环境

React Native 环境搭建 — macOS开发环境

必安依赖： node、react-native-cli、Xcode

# 安装 node
sudo npm i -g node

# 安装 react-native-cli
sudo npm i -g react-native-cli

安装成功后，检测版本。

Xcode 在 AppStore 中下载安装

以上安装完成后，创建 react-native 项目

# 创建项目
react-native init RNDemo (项目名称)

package.json

{
  "name": "RNDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

启动Xcode，打开项目中的ios，启动中会出现如下报错，不要慌，只需根据提示引入相应依赖重启即可。

点击运行后，会显示以下错误，这时，在Libraries 中 add ios/Pods/Pods.xcodeproj ,并在 Build Phases - Link Binary With Libraries 中 add libDoubleConversion.a


经过以上配置，即可正常运行了。

如ios中没有生成Pods文件夹，将会出现如下错误，请耐心往下看

点击运行后，会显示以下错误：这时，在Libraries 中 add node_modules/react-native/React/React.xcodeproj，并在Build Phases - Link Binary With Libraries 中 add libReact.a


Command + Shift + K clean后，点击运行后，会显示以下错误：这时，在Build Phases - Link Binary With Libraries 中 add JavaScriptCode.framework


Command + Shift + K clean后，点击运行后，会显示以下错误：这时，在Libraries 中 add node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj，并在Build Phases - Link Binary With Libraries 中 add libRCTWebSocket.a


Command + Shift + K clean后，点击运行后，会出现报错，参照上边操作，分别引入 RCTNetwork.xcodeproj、RCTText.xcodeproj、RCTImage.xcodeproj、RCTAnimation.xcodeproj 即可正常运行