React Native Academy · 课时

安装 Node、Expo CLI 与模拟器

配置 Node.js、Expo CLI，并设置 iOS Simulator 或 Android Emulator，以便在本地运行 React Native 应用。

安装 Node、Expo CLI 与模拟器 是 CoddyKit 上的免费 React Native Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Why Node.js Powers React Native

React Native runs on Node.js — it powers the Metro bundler that turns your JSX into an app. Install the LTS version for stability, ideally via the nvm version manager.

# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Then install the latest LTS Node
nvm install --lts
nvm use --lts

# Verify installation
node --version   # e.g. v20.12.0
npm --version    # e.g. 10.5.0

Installing the Expo CLI

The Expo CLI lets you create, run, and build apps without touching native code. Pair it with the Expo Go app to scan a QR code and see your app on a real phone instantly.

# Install Expo CLI globally
npm install -g expo-cli

# Verify the installation
expo --version

# Alternatively, use npx (no global install needed)
npx create-expo-app --version

Setting Up iOS Simulator on macOS

For the iOS Simulator you need a Mac with Xcode installed. Open Xcode once to accept its license, then add the command line tools. Expo can launch a simulator with one keypress.

# Install Xcode Command Line Tools
xcode-select --install

# Open a simulator from the terminal
open -a Simulator

# List available simulator devices
xcrun simctl list devices

Setting Up Android Emulator

For Android you need Android Studio. Install the SDK and emulator, create a virtual Pixel device, and set the ANDROID_HOME variable so Expo can find everything. See the code.

# Add to ~/.zshrc or ~/.bashrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Reload shell config
source ~/.zshrc

# Verify adb is found
adb --version

Understanding the Metro Bundler

Starting a project launches Metro, the bundler that watches your files and reloads instantly with Fast Refresh. If things get stale, clear its cache with the --clear flag.

# Start Metro and clear cache
npx expo start --clear

# Metro outputs a QR code and key shortcuts:
#  i → open iOS Simulator
#  a → open Android Emulator
#  r → reload the app
#  m → toggle the developer menu

Java Development Kit for Android

Android builds need a Java Development Kit — Expo recommends JDK 17. Install it, then run java --version to confirm it's on your PATH. The code installs it via Homebrew.

# Install JDK 17 via Homebrew (macOS)
brew install --cask temurin@17

# Verify Java version
java --version
# Expected: openjdk 17.x.x

# On Windows: download installer from
# https://adoptium.net/temurin/releases/

Verifying Your Full Setup

Once everything's installed, run npx expo-env-info (or react-native doctor) to scan your setup. It flags anything missing, so fix those issues before your first project.

# Check your environment with Expo
npx expo-env-info

# Or use the React Native community CLI doctor
npx react-native doctor

# Install Watchman for better file watching (macOS)
brew install watchman

Watchman: Faster File Watching

Watchman is a file-watcher from Facebook that makes Metro detect changes much faster, especially on macOS. Install it via Homebrew before you start building.

# Install Watchman on macOS
brew install watchman

# Verify installation
watchman version

# If Metro has stale Watchman state, reset it
watchman watch-del-all

Environment Variables and PATH

Many setup headaches come down to a missing PATH entry — your shell can't find adb or the emulator. Add the paths to ~/.zshrc, then reload it. The code shows exactly what.

# Example ~/.zshrc additions for React Native
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
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

# Apply changes
source ~/.zshrc

Expo Go App on a Real Device

The fastest way to test on a real phone is the Expo Go app. Run expo start, then scan the QR code, and your app loads over Wi-Fi. Perfect for quick development. 📱

# Start Expo development server
npx expo start

# Expo prints a QR code in the terminal.
# Scan it with:
#   iOS: Camera app → tap the banner
#   Android: Expo Go app → Scan QR Code

# Or press 's' to switch to Expo Go mode
# if using a dev build by default

Troubleshooting Common Setup Issues

Most setup snags are predictable: a busy port 8081, a stale Metro cache, the wrong Node version, or a missing ANDROID_HOME. And always read the red error screen carefully.

# Common fixes

# Clear Metro cache
npx expo start --clear

# Kill process on port 8081
lsof -ti:8081 | xargs kill -9

# Check connected Android devices
adb devices

# Restart adb server if devices not showing
adb kill-server
adb start-server

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

You built your toolchain: Node and nvm run the JavaScript, Expo CLI scaffolds and serves your app, and Watchman plus the SDKs power simulators. Next: your first project! 🎉

常见问题解答

「安装 Node、Expo CLI 与模拟器」课时是免费的吗？

是的 — 「安装 Node、Expo CLI 与模拟器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。

「安装 Node、Expo CLI 与模拟器」这节课中我会学到什么？

配置 Node.js、Expo CLI，并设置 iOS Simulator 或 Android Emulator，以便在本地运行 React Native 应用。你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Native Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「安装 Node、Expo CLI 与模拟器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Native Academy 课中编写并运行代码吗？

能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Native Academy