iOS 模拟器 + Android 模拟器双配置

Mac 系统环境搭建第二步

在安装了 Node.js、Watchman 和 Xcode 之后，我们需要配置 iOS 模拟器和 Android 模拟器，以便在开发过程中测试 React Native 应用。

1. 配置 iOS 模拟器

步骤

1. 打开 Xcode

   • 点击 Launchpad → Xcode

2. 打开模拟器

   • 在 Xcode 中，点击 "Xcode" → "Open Developer Tool" → "Simulator"
   • 或者使用命令行启动：open -a Simulator

3. 选择设备

   • 在模拟器中，点击 "Hardware" → "Device" → "iOS" → 选择一个设备
   • 建议选择较新的设备，如 iPhone 14 或 iPhone 15

4. 运行模拟器

   • 模拟器将启动并显示 iOS 界面

2. 安装和配置 Android Studio

步骤

1. 下载 Android Studio

   • 访问 Android Studio 官方网站
   • 点击 "Download Android Studio"
   • 接受许可协议并下载 macOS 版本

2. 安装 Android Studio

   • 双击下载的 .dmg 文件
   • 将 Android Studio 拖拽到 Applications 文件夹
   • 打开 Android Studio

3. 配置 Android SDK

   • 首次启动时，会提示设置 Android SDK
   • 保持默认设置即可
   • 等待 SDK 下载和安装完成

4. 打开 SDK Manager

   • 在 Android Studio 中，点击 "File" → "Settings" → "Appearance & Behavior" → "System Settings" → "Android SDK"
   • 或者点击欢迎界面中的 "Configure" → "SDK Manager"

5. 安装必要的 SDK 组件

   • 在 "SDK Platforms" 选项卡中，确保安装以下 SDK：
     • Android 13 (API Level 33)
     • Android 12 (API Level 31)
     • Android 11 (API Level 30)
   • 在 "SDK Tools" 选项卡中，确保安装以下工具：
     • Android SDK Build-Tools
     • Android SDK Command-line Tools
     • Android SDK Platform-Tools
     • Android Emulator
     • Intel x86 Emulator Accelerator (HAXM installer)

3. 配置 Android 环境变量

步骤

1. 打开终端

   • 运行以下命令打开 bash 配置文件：

     nano ~/.bash_profile

   • 或者如果使用 zsh：

     nano ~/.zshrc

2. 添加环境变量

   • 在文件末尾添加以下内容：

     export ANDROID_HOME=$HOME/Library/Android/sdk
     export PATH=$PATH:$ANDROID_HOME/platform-tools
     export PATH=$PATH:$ANDROID_HOME/tools
     export PATH=$PATH:$ANDROID_HOME/tools/bin

3. 保存并退出

   • 按 Ctrl + X，然后按 Y，最后按 Enter

4. 使配置生效

   • 运行以下命令：

     source ~/.bash_profile

   • 或者如果使用 zsh：

     source ~/.zshrc

5. 验证配置

   • 运行以下命令：

     adb version

   • 看到版本号输出，表示配置成功

4. 创建和配置 Android 模拟器

步骤

1. 打开 AVD Manager

   • 在 Android Studio 中，点击 "Tools" → "AVD Manager"
   • 或者点击欢迎界面中的 "Configure" → "AVD Manager"

2. 创建虚拟设备

   • 点击 "Create Virtual Device"
   • 选择一个设备类型（如 "Pixel 6"）
   • 点击 "Next"
   • 选择一个系统镜像（建议选择 "R" 或更高版本）
   • 点击 "Download" 下载系统镜像
   • 下载完成后，点击 "Next"
   • 配置虚拟设备名称和其他设置
   • 点击 "Finish"

3. 启动模拟器

   • 在 AVD Manager 中，找到刚创建的虚拟设备
   • 点击 "Play" 按钮启动模拟器
   • 等待模拟器启动完成

5. 常见问题解决

iOS 模拟器问题

• 问题：模拟器启动失败 解决：确保 Xcode 已正确安装，尝试重启 Xcode 和模拟器

• 问题：模拟器运行缓慢 解决：关闭其他占用资源的应用，或使用较旧的设备型号

Android Studio 安装问题

• 问题：Android Studio 安装失败 解决：确保下载的安装包完整，尝试重新下载

• 问题：SDK 下载失败 解决：检查网络连接，或使用代理

Android 模拟器问题

• 问题：模拟器启动失败 解决：确保 HAXM 已正确安装，尝试重启 AVD Manager

• 问题：模拟器运行缓慢 解决：启用 HAXM 加速，分配更多内存给模拟器

6. 总结

配置 iOS 模拟器和 Android 模拟器是 Mac 系统上 React Native 开发的重要步骤。通过双模拟器配置，你可以在开发过程中同时测试 iOS 和 Android 平台的应用效果。

确保两个模拟器都能正常运行后，我们就可以继续进行环境变量的配置和第一个 React Native 项目的创建了。

下一节，我们将介绍如何配置环境变量并运行第一个 React Native 项目。