healthapp

3.0 KiB

Raw Permalink Blame History

03-APP React Native 环境搭建

目标

搭建 React Native 开发环境，支持 Android 和 iOS 开发。

前置要求

Node.js 18+（已在上一步安装）
JDK 17（Android 开发）
Android Studio（Android 模拟器）
Xcode（iOS 开发，仅 macOS）

实施步骤

步骤 1：安装 JDK 17

Windows:

下载 OpenJDK 17：https://adoptium.net/
选择 Windows x64 Installer

安装并配置环境变量：

JAVA_HOME = C:\Program Files\Eclipse Adoptium\jdk-17.x.x
Path 添加 %JAVA_HOME%\bin

验证：

java -version
# 输出: openjdk version "17.x.x"

macOS:

brew install openjdk@17
echo 'export JAVA_HOME=$(/usr/libexec/java_home -v17)' >> ~/.zshrc
source ~/.zshrc
java -version

步骤 2：安装 Android Studio

下载：https://developer.android.com/studio
安装时选择：
- Android SDK
- Android SDK Platform
- Android Virtual Device
打开 Android Studio → SDK Manager
安装 Android 13 (API 33) 或 Android 14 (API 34)
配置环境变量：

Windows:

ANDROID_HOME = C:\Users\<用户名>\AppData\Local\Android\Sdk
Path 添加:
  %ANDROID_HOME%\platform-tools
  %ANDROID_HOME%\emulator

macOS/Linux:

echo 'export ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/emulator' >> ~/.zshrc
source ~/.zshrc

步骤 3：创建 Android 模拟器

打开 Android Studio
Tools → Device Manager → Create Device
选择 Pixel 6 或其他设备
选择系统镜像（推荐 API 33/34）
完成创建并启动模拟器

步骤 4：安装 React Native CLI

npm install -g react-native-cli

步骤 5：验证环境

# 创建测试项目
npx react-native init RNTest --template react-native-template-typescript

cd RNTest

# 启动 Metro bundler
npm start

# 新终端运行 Android
npm run android
# 或运行 iOS（仅 macOS）
npm run ios

步骤 6：iOS 环境（仅 macOS）

# 安装 Xcode（App Store）
# 安装命令行工具
xcode-select --install

# 安装 CocoaPods
sudo gem install cocoapods

# 在项目 ios 目录
cd ios && pod install && cd ..

常见问题

Android 模拟器启动失败

确保 BIOS 开启虚拟化（VT-x / AMD-V）- Windows 需开启 Hyper-V 或 HAXM

Metro bundler 端口占用

npx react-native start --port 8082

Gradle 下载慢

编辑 android/gradle/wrapper/gradle-wrapper.properties，使用国内镜像

需要创建的文件

本步骤无需创建项目文件，仅环境配置。

验收标准

java -version 显示 JDK 17
adb devices 可列出模拟器/设备
测试项目在模拟器正常运行

预计耗时

30-60 分钟（主要是下载时间）

下一步

完成后进入 02-后端开发/01-项目结构初始化.md
' ][;plplpl"lkkjijijijijijiiiiiii]'

3.0 KiB Raw Permalink Blame History