React Native 初始环境搭建与模拟器调试
之前在 **React Native 入门** 中其实已经提过环境配置的问题，但是换了电脑发现又出问题了，就干脆重新开个笔记记录一下好了
快捷键的话，好像 expo 版本不一样也不太一样，我现在用的版本是：~54.0.12
node 安装
RN 目前官方都在推荐使用 expo 去进行 RN 的环境管理，而 expo 又是 npm 上的一个 package，所以环境配置最基础的就是安装 node
node 安装部分不多赘述，能够使用 npm, yarn, pnpm 即可，可以直接通过 node 官方安装 npm，反向用 pnpm 安装管理 node 版本，或者使用 nvm 这种工具
安卓模拟器
安卓的开发其实比较无痛，直接通过 Android Studio 安装对应的 SDK 即可——现在如果是第一次下载 Android Studio，没有安装好全家桶是没办法进入下一步的
打开 VDM 的方式也是一样的，至少过去两年没啥变化：
然后会进入列表，选择设备：
目前来说可能唯一的差别就在于，新版的 UI 更简洁了吧……
终端操作
这里有这么几个步骤需要执行：
-
确认 sdk 安装完毕
可以通过下面指令确认：
echo $HOME/Library/Android/sdk成功安装的话会打印出 sdk 的地址：
❯ echo $HOME/Library/Android/sdk /Users/usrname/Library/Android/sdk -
确定 emulator 是否存在
这点关系到是否能够将 emulator 写到指令中，正常来说显示结果如下：
❯ ls $HOME/Library/Android/sdk/emulator _CodeSignature crashreport lib ***simd package.xml resources android-info.txt emulator lib64 nimble_bridge qemu source.properties bin64 emulator-check LICENSE NOTICE.csv qemu-img crashpad_handler include mksdcard NOTICE.txt qsn必要重要的是这 3 个指令：
emulator,emulator-check和mksdcard -
将 emulator 写到 PATH 里
我是直接把 export 写到 zshrc 里了：
export PATH=$PATH:$HOME/Library/Android/sdk/emulator export PATH=$PATH:$HOME/Library/Android/sdk/platform-tools -
测试
❯ emulator -list-avds Medium_Phone_API_36.1这个情况已经证明
emulator可以用了
emulator 安装成功后就可以使用这个指令打开模拟器了：
emulator -avd <avd-name>
这个指令可以避免打开 Android Studio，但是可以直接打开模拟器
终端优化
就是下面这个脚本：
open-android() {
if [ -z "$1" ]; then
echo "Usage: open-android <avd-name>"
emulator -list-avds
else
emulator -avd "$1"
fi
}
使用效果为：
❯ open-android
Usage: open-android <avd-name>
Medium_Phone_API_36.1
IOS 模拟器
实际上这个真的很烦……
现在的新 mac 开发的话，基本上都是强制要求配置 xcode cli，所以现在就有了一个冲突：我的电脑上只有部分 xcode 安装好了，这种情况下有了小小的冲突
这个时候需要到 app store 里面先把 xcode 下载好，然后再开始后面的步骤
比起安装更像是 debug……
xcodebuild 指向错误
这个可能和先安装了 cli 有，现在跑下面的指令会出错：
❯ xcodebuild -showsdks
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/***mandLi***ools' is a ***mand line tools instance
表明 xcodebuild 指向不对，需要重新进行绑定：
❯ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Password:
❯ xcode-select --print-path
/Applications/Xcode.app/Contents/Developer
随后再使用 xcodebuild -showsdks:
❯ xcodebuild -showsdks
DriverKit SDKs:
DriverKit 25.0 -sdk driverkit25.0
iOS SDKs:
iOS 26.0 -sdk iphoneos26.0
iOS Simulator SDKs:
Simulator - iOS 26.0 -sdk iphonesimulator26.0
macOS SDKs:
macOS 26.0 -sdk macosx26.0
macOS 26.0 -sdk macosx26.0
tvOS SDKs:
tvOS 26.0 -sdk appletvos26.0
tvOS Simulator SDKs:
Simulator - tvOS 26.0 -sdk appletvsimulator26.0
visionOS SDKs:
visionOS 26.0 -sdk xros26.0
visionOS Simulator SDKs:
Simulator - visionOS 26.0 -sdk xrsimulator26.0
watchOS SDKs:
watchOS 26.0 -sdk watchos26.0
watchOS Simulator SDKs:
Simulator - watchOS 26.0 -sdk watchsimulator26.0
这个时候就能拿到完整的列表了
simulator OS version 为空
这是因为对应的 OS 版本没安装，需要到 xcode → Settings → ***ponents 去安装对应的 OS 版本：
我是觉得这个问题挺离谱的，因为跑 list 的时候都有，但是本质上没安装，而且 list 指令一点都没提示说哪些安装了哪些没有……
💦：我找了下才发现，查看 runtime 是否安装的 list 的指令是这个：
❯ xcrun simctl list runtimes
== Runtimes ==
iOS 26.0 (26.0 - 23A343) - ***.apple.CoreSimulator.SimRuntime.iOS-26-0
终端操作
我也是才发现，使用 open -a Simulator 可以直接打开 simulator，而不用打开 xcode……
不过这个会直接用 detached mode 打开
终端优化
脚本如下：
open-ios() {
if [ -z "$1" ]; then
echo "Usage: open-ios <device-name>"
echo "Available devices:"
xcrun simctl list devices | grep -E "Booted|Shutdown"
else
xcrun simctl boot "$1"
open -a Simulator
fi
}
运行结果如下：
❯ open-ios
Usage: open-ios <device-name>
Available devices:
iPhone 17 Pro (069E7FB1-83BF-4EE6-A365-3979CD6DEF25) (Shutdown)
iPhone 17 Pro (16ED40D6-18E3-405F-B6EE-F3D2BD986CB6) (Shutdown)
iPhone 17 Pro Max (A843E7A2-DDF6-4BA0-A5FD-E376EC51810B) (Shutdown)
iPhone Air (F7B43D8F-54F6-42DC-84E8-6061F3AD597B) (Shutdown)
iPhone 17 (EAD672C8-6E6A-4EBF-8B8B-9CEAA5D02E8D) (Shutdown)
iPhone 16e (6B4DFD5F-D25E-45DD-B70F-42EE117EF38B) (Shutdown)
iPad Pro 11-inch (M4) (B408929E-9EC6-490B-A829-9D4A95B34BE7) (Shutdown)
iPad Pro 13-inch (M4) (ACE78BFC-5A7D-43C5-A141-AC7E5D41FF03) (Shutdown)
iPad mini (A17 Pro) (CB5D9D64-4537-440D-B8A7-D4B02A395B45) (Shutdown)
iPad (A16) (092007A9-5CD3-4745-AEC1-75897BFAF85D) (Shutdown)
iPad Air 13-inch (M3) (1D4459ED-FD38-4681-BC7D-B136CA88915E) (Shutdown)
iPad Air 11-inch (M3) (399A4504-6702-4535-8E38-1AF42A6673E7) (Shutdown)
打开 device 的话，需要把设备名称用 " 包起来，如:
❯ open-ios "iPhone 17 Pro"
❯ open-ios "iPhone 17 Pro Max"
❯ open-ios "iPhone 17"
Watchman
在 Mac 上开发，而且 RN 版本比较新的话，应该内部直接使用 **fsevents** 代替 watchman 了——我说的是这个库实现的部分，RN 目前对这个库没有依赖
不过现在公司的项目还在使用 watchman，所以 RN 版本比较老，可能还是需要在本地安装 watchman 进行兼容
这个 post 有简单的解释：what is the use of watchman for react native?
React Native uses watchman to detect when you’ve made code changes and then automatically build and push the update to your device without you needing to manually refresh it.
不过这个 post 是 2017 年的了
个人建议如果是开启一个新的 RN 学习项目，那么没必要安装，如果是企业项目，并且已经稳定上线了，大概率 watchman 还是一个必备的依赖
Expo DevTools Shortcuts
IOS Simulator
- ⌘ + D：Dev Menu
- R： reload
Android Emulator
- ⌘ + M：Dev Menu
- R + R： reload
