MacBook M2 搭建React Native开发环境

文章前言

永远把别人对你的批评记在心里，别人的表扬，就把它忘了。Hello 大家好～！我是南宫墨言QAQ

本文主要是记录自己在使用MacBook M2搭建React Native开发环境的相关流程，在给自己做记录的同时，希望能给在同样配置的小伙伴在搭建React Native开发环境提供一些参考，文中如有记录不正确的地方，欢迎大家在评论区指出，谢谢

观看到文章最后的话，如果觉得不错，可以点个关注或者点个赞哦！感谢～❤️

文章主体

感谢各位观者的耐心观看，React Native开发环境搭建 正片即将开始，文章具体会分为必须集成部分 、iOS集成部分 、Android集成部分等展开讲解，且听南宫墨言QAQ娓娓道来

在开始介绍集成之前，这里先贴一下集成成功过后，执行 npx react-native doctor（检查开发环境）和 npx react-native info(输出开发环境信息)

npx react-native doctor

Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ yarn - Required to install NPM dependencies
 ✓ Watchman - Used for watching changes in the filesystem when in development mode

Android
 ✓ Adb - Required to verify if the android device is attached correctly
 ✓ JDK - Required to compile Java code
 ✓ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation

iOS
 ✓ Xcode - Required for building and installing your app on iOS
 ✓ Ruby - Required for installing iOS dependencies
 ✓ CocoaPods - Required for installing iOS dependencies
 ✓ ios-deploy - Required for installing your app on a physical device with the CLI
 ✓ .xcode.env - File to customize Xcode environment

Errors:   0
Warnings: 0

npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 14.1.2
  CPU: (12) x64 Apple M2 Max
  Memory: 905.91 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.21
    path: /usr/local/bin/yarn
  npm:
    version: 10.2.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2023.11.27.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK:
    API Levels:
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 34.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.11005911
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.21
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/nangongmoyan/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.7
    wanted: 0.72.7
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

必须集成

Node

React Native 是基于JavaScript 开发语言为基础的编写的混合开发框架，所以在集成环境时Node是必不可少的，在自己电脑终端输入node -v查看是否已经安装了对应的node版本, 可以参考我之前的这篇文章# 前端开发之MacBook使用纪要（iTerm2、oh-my-zsh、git、node...）里有关于node的安装，或者按照你自己的方法安装node亦可

node -v

本人还是建议你参考我写的文章，使用n进行node的多版本管理，仅是建议，嘻嘻

Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

• 安装

  npm install -g yarn

• 查看版本

  yarn -v

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

iOS集成

iOS集成顾名思义是要在mac上集成开发ios应用的环境，除了必须集成部分外，还需要Watchman、Xcode、Ruby 和 CocoaPods的集成，接下来我会一个个分析

Watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

• 安装

  brew install watchman

• 查看版本

  watchman -v

Xcode

Xcode 是开发ios应用在编译、运行时的必要软件，它提供了项目构建、打包、修改原生部分等。你可以通过 App Store 或是到Apple 开发者官网上下载，这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

• 安装

• 打开后选择勾选你需要开发的平台

• 安装完后打开

ruby

这里我将使用rbenv作为ruby的版本管理工具

• 安装rbenv

  brew install rbenv ruby-build

• 安装成功后输入rbenv 就可以看到相关提示：

• 安装指定版本的ruby

  rbenv install 2.7.6

• 安装成功后，我们让其在本地环境中生效：

rbenv global 2.7.6

• 查看本机ruby版本

ruby --version

• 查看一下 Ruby 捆绑的 Gem 的 PATH

which gem

CocoaPods

CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods 的版本需要 1.10 以上。

• 安装

  brew install cocoapods

或使用 gem 来安装

sudo gem install cocoapods

• 查看本机pod版本

pod --version

Android集成

Android集成顾名思义是要在mac上集成开发android应用的环境，除了必须集成部分外，还需要JDK、Android Studio、Android SDK 和 ANDROID_HOME环境变量的集成，接下来我会一个个分析

JDK

JDK全称是Java Development Kit，它是 Oracle 公司发行的 Java 开发工具包，是作为Java的开发的必要条件之一。React Native 需要 Java Development Kit [JDK] 11， 下面我们将使用Homebrew来安装由 Azul 提供的 名为 Zulu 的 OpenJDK 发行版

• 安装

brew tap homebrew/cask-versions
brew install --cask zulu11

• 查看版本

  javac -version

Android Studio

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接

Android SDK

在Android Studio中下载相关的SDK，根据React Native官网提示下载安装，这里不再赘述

配置 ANDROID_HOME 环境变量

打开.zshrc,将下面配置添加到.zshrc文件中

# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚  
export ANDROID_HOME=$HOME/Library/Android/sdk  
export PATH=$PATH:$ANDROID_HOME/emulator  
export PATH=$PATH:$ANDROID_HOME/tools  
export PATH=$PATH:$ANDROID_HOME/tools/bin  
export PATH=$PATH:$ANDROID_HOME/platform-tools

保存后，执行source .zshrc生效

创建新项目测试

初始化

npx react-native@latest init AwesomeProject

ios 运行

pod install

android 运行

结尾营业

看官都看到这了，如果觉得不错，可不可以不吝啬你的小手手帮忙点个关注或者点个赞