参考官网

Ios 环境安装的依赖有：Homebrew、Node、Watchman、Yarn、Xcode、CocoaPods
Android 环境安装的依赖有： Node、JDK、Android Studio、Android SDK、Android Virtual Device 手机模拟器
以下的 ios 环境搭建操作建议开启代理，否则极易失败

一、安装 Homebrew

Homebrew是Mac系统的软件包管理工具，拥有安装、卸载、更新、查看、搜索等功能

1. 下载安装
   中途等待需要点击回车继续下载，等待最后下载完

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 常用命令

1. brew -v                       // 查看brew版本 
2. brew update                   // 更新brew版本 

3. brew install 软件包名          // 安装依赖 
4. brew uninstall 软件包名        // 卸载依赖 
5. brew list                     // 查看已安装的所有包 
6. brew install 软件包名          // 查看已安装的单个包 
7. brew search 软件包名           // 查看软件包的可用版本 

二、安装 Node

1. 安装 Node
   node 版本要求 v16 以上的偶数号版本，也可用NVM管理node版本

brew install node@16

2. 查看安装后的 Node 版本

node -v

三、安装 watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能，在react Native中使用 Watchman 来检测您何时进行了代码更改，然后自动构建并将更新推送到您的设备，可加快加载速度

1. 安装 watchman

brew install watchman

2. 查看安装后的 Node 版本

node -v

四、配置淘宝镜像、安装 Yarn

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

1. 配置镜像源

// 使用nrm工具切换淘宝源
npx nrm use taobao

// 如果之后需要切换回官方源可使用
npx nrm use npm

2. 安装 Yarn

npm install -g yarn

3. 查看 Yarn 版本

yarn -v

五、安装 CocoaPods

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

1. 安装

brew install cocoapods

//或者
sudo gem install cocoapods

2. 常用命令

pod --version    // 查看版本
pod init         // 初始化 Podfile 文件
vim Podfile      // 编辑 Podfile 文件
pod install      // 安装依赖
pod repo update  // 更新 cocoapods 列表

六、安装 Xcode

Xcode是开发ios的IDEA，我们在 AppStore 中搜索并安装，安装成功后需要指定路径

// 修改 xcode 路径
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

七、安装 JDK

1. 查看电脑系统架构

// 日志最后的单词就是当前系统，如果最后是 X86_64 ，则代表系统是 X64 架构
uname -a

2. JDK 下载地址
   下载前选择对应的系统架构

// JDK版本要求 v11 版本，低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 java 8 版本）。

// JDK 11
https://www.oracle.com/java/technologies/downloads/#java11

// JDK 8
https://www.oracle.com/java/technologies/downloads/#java8

3. 查看安装后的 JDK 版本

// JDK 11
javac -version;

// JDK 8
java -version;

八、安装配置 Android Studio

1. 下载 Android Studio

// 下载地址
https://developer.android.google.cn/studio?hl=zh-cn

2. 安装 Android Studio

安装到 Install Type 步骤时，选择 Custom --> 下一步，全部勾选 Android SDK、Android SDK Platform、Android Virtual Device
--> 下一步 --> accept --> finish 等待 --> 结束后打开 Android Studio

3. 配置 Android Studio 的 SDK Manager

在 Android Studio 的 Welcome to Android Studio 启动页，点击 more action --> 点击 SDK Manager
-->在 SDK Manager 中选择 SDK Platforms 选项 --> 然后在右下角勾选 Show Package Details --> 勾选 Android 13.0 下的
√ Android SDK Platform 33
√ Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
--> 选择 SDK Tools 选项卡 --> 然后在右下角勾选 Show Package Details --> 勾选 Android SDK Build-Tools 34 下的
√ 33.0.0
--> 点击 apply  --> ok

4. 配置 Android SDK 的环境变量

React Native 需要通过环境变量来了解 Android SDK 装在什么路径，从而正常进行编译

1. 查看 Android SDK 的安装路径

在 Android Studio 的 Welcome to Android Studio 启动页，点击 more action --> 点击 SDK Manager
--> 上方的 Android SDK Location 路径就是 Android SDK 的安装路径 --> 拷贝

2. 配置 Android SDK 的环境变量

// 1. 查看当前使用的shell脚本工具
echo $0

// 2. 如果你的 shell 是 zsh，则配置文件为~/.zshrc，如果是 bash 则为~/.bash_profile，把下面的命令加入到 shell 的配置文件中，以 zsh 为例
vi ~/.zshrc

// 3. 将下方代码拷贝到 ~/.zshrc 文件中
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

// 4. 加载 配置文件让环境变量生效
source $HOME/.zshrc

// 5. 保险起见，两个配置文件都加上，以防更改shell时出错
vi ~/.bash_profile

// 6. 将下方代码拷贝到 ~/.bash_profile 文件中
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

// 7. 加载 配置文件让环境变量生效
source $HOME/.bash_profile

九、创建 react-native 项目

1. 如果之前安装过旧版本 react-native 脚手架，需先卸载

npm uninstall -g react-native-cli @react-native-community/cli

2. 创建项目

// 创建最新的 react-native 项目
npx react-native@latest init AwesomeProject

// 创建指定版本的 react-native 项目
npx react-native@X.XX.X init AwesomeProject --version X.XX.X

十、启动 Ios 环境

1. 启动 ClashX 代理，配置 git 的代理网址

git config --global http.proxy http://127.0.0.1:7890
git config --global https.proxy http://127.0.0.1:7890

2. 启动 ios 服务

yarn ios

十一、启动 Android 环境

1. 配置国内镜像（不配置会很慢、而且非常容易下载失败）
   打开项目下的 android/build.gradle 文件，修改代码如下

// 注意：镜像路径不是固定的会随时更新，如果加速无效可到 React Native 中文网查看，地址：https://reactnative.cn/docs/environment-setup
repositories {
    google()
    mavenCentral()
    maven {
        url 'https://maven.aliyun.com/repository/public/'
    }
}

2. 启动 android 服务

// 当执行 npm run android 时会自动启动并连接 Android Virtual Device 手机模拟器
yarn android

十二、react-native android环境常见异常和处理方式

1. 出现 Error: Unable to resolve module react-native from

// 1. 删除 node_modules
// 2. 清除缓存，重新安装依赖
npm cache clean --force
yarn install               
yarn android