参考官网
Ios 环境安装的依赖有：Homebrew、Node、Watchman、Yarn、Xcode、CocoaPods
Android 环境安装的依赖有： Node、JDK、Android Studio、Android SDK、Android Virtual Device 手机模拟器
以下的 ios 环境搭建操作建议开启代理，否则极易失败
一、安装 Homebrew
Homebrew是Mac系统的软件包管理工具，拥有安装、卸载、更新、查看、搜索等功能
- 下载安装
中途等待需要点击回车继续下载，等待最后下载完
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
- 常用命令
1. brew -v // 查看brew版本
2. brew update // 更新brew版本
3. brew install 软件包名 // 安装依赖
4. brew uninstall 软件包名 // 卸载依赖
5. brew list // 查看已安装的所有包
6. brew install 软件包名 // 查看已安装的单个包
7. brew search 软件包名 // 查看软件包的可用版本
二、安装 Node
- 安装 Node
node 版本要求 v16 以上的偶数号版本，也可用NVM管理node版本
brew install node@16
- 查看安装后的 Node 版本
node -v
三、安装 watchman
Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能，在react Native中使用 Watchman 来检测您何时进行了代码更改，然后自动构建并将更新推送到您的设备，可加快加载速度
- 安装 watchman
brew install watchman
- 查看安装后的 Node 版本
node -v
四、配置淘宝镜像、安装 Yarn
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。
- 配置镜像源
// 使用nrm工具切换淘宝源
npx nrm use taobao
// 如果之后需要切换回官方源可使用
npx nrm use npm
- 安装 Yarn
npm install -g yarn
- 查看 Yarn 版本
yarn -v
五、安装 CocoaPods
CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖
- 安装
brew install cocoapods
//或者
sudo gem install cocoapods
- 常用命令
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
- 查看电脑系统架构
// 日志最后的单词就是当前系统，如果最后是 X86_64 ，则代表系统是 X64 架构
uname -a
- 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
- 查看安装后的 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 装在什么路径，从而正常进行编译
- 查看 Android SDK 的安装路径
在 Android Studio 的 Welcome to Android Studio 启动页，点击 more action --> 点击 SDK Manager
--> 上方的 Android SDK Location 路径就是 Android SDK 的安装路径 --> 拷贝
- 配置 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 项目
- 如果之前安装过旧版本 react-native 脚手架，需先卸载
npm uninstall -g react-native-cli @react-native-community/cli
- 创建项目
// 创建最新的 react-native 项目
npx react-native@latest init AwesomeProject
// 创建指定版本的 react-native 项目
npx react-native@X.XX.X init AwesomeProject --version X.XX.X
十、启动 Ios 环境
- 启动 ClashX 代理，配置 git 的代理网址
git config --global http.proxy http://127.0.0.1:7890
git config --global https.proxy http://127.0.0.1:7890
- 启动 ios 服务
yarn ios
十一、启动 Android 环境
- 配置国内镜像（不配置会很慢、而且非常容易下载失败）
打开项目下的 android/build.gradle 文件，修改代码如下
// 注意：镜像路径不是固定的会随时更新，如果加速无效可到 React Native 中文网查看，地址：https://reactnative.cn/docs/environment-setup
repositories {
google()
mavenCentral()
maven {
url 'https://maven.aliyun.com/repository/public/'
}
}
- 启动 android 服务
// 当执行 npm run android 时会自动启动并连接 Android Virtual Device 手机模拟器
yarn android
十二、react-native android环境常见异常和处理方式
- 出现
Error: Unable to resolve module react-native from
// 1. 删除 node_modules
// 2. 清除缓存，重新安装依赖
npm cache clean --force
yarn install
yarn android
网友评论