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

逃离我推掉我的手 2021-12-16 23:11 457阅读 0赞

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

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

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

安装成功后，检测版本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]  
Xcode 在 AppStore 中下载安装  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]  
以上安装完成后，创建 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，启动中会出现如下报错，不要慌，只需根据提示引入相应依赖重启即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]  
点击运行后，会显示以下错误，这时，在Libraries 中 add ios/Pods/Pods.xcodeproj ,并在 Build Phases - Link Binary With Libraries 中 add libDoubleConversion.a  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 4]  
经过以上配置，即可正常运行了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 5]

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

点击运行后，会显示以下错误：这时，在Libraries 中 add node\_modules/react-native/React/React.xcodeproj，并在Build Phases - Link Binary With Libraries 中 add libReact.a  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 7]  
Command + Shift + K clean后，点击运行后，会显示以下错误：这时，在Build Phases - Link Binary With Libraries 中 add JavaScriptCode.framework  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 9]  
Command + Shift + K clean后，点击运行后，会显示以下错误：这时，在Libraries 中 add node\_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj，并在Build Phases - Link Binary With Libraries 中 add libRCTWebSocket.a  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 11]  
Command + Shift + K clean后，点击运行后，会出现报错，参照上边操作，分别引入 RCTNetwork.xcodeproj、RCTText.xcodeproj、RCTImage.xcodeproj、RCTAnimation.xcodeproj 即可正常运行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211214/d58d24eef20e4e918c8b3e5af1e57135.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20211214/ec988c98c6824d819354b58ee2f568c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]: /images/20211214/15844edc66774f51a77d031c083eab54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 3]: /images/20211214/abc76d8f39c047ecbcd47fce9730ecb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 4]: /images/20211214/09b27094a32e411089cf68c7efffaf46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 5]: /images/20211214/18cf4798642a477d87b2611a7eae5ab1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 6]: /images/20211214/08c8e36ac285402cb536769fd6fb851a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 7]: /images/20211214/e45a269e6ff94188bba4921921330ebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 8]: /images/20211214/2e18dfc2f9f1499095ba9a8a9baf6855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 9]: /images/20211214/f26d6c61200a4c1db75a368a9b9a716d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 10]: /images/20211214/79daaa18391347598e9e623478d10950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 11]: /images/20211214/6d11a13149cf4ec38d50b03bb3fb2c9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 12]: /images/20211214/3c29dc8098464e0aac099aa908d77c18.png