React Native 开发环境搭建与项目启动

eason_fan
380 阅读3分钟

React Native 开发环境搭建与项目启动

前言

最近想学习下移动端开发，鉴于百词斩用的不顺手，正好开发一个app供自己记单词。记录下如何搭建ReactNative开发环境和启动项目。

目录

  1. 基础环境配置
  2. Android 开发环境搭建
  3. iOS 开发环境搭建
  4. 创建新项目
  5. 运行项目
  6. 常见问题解决

1. 基础环境配置

1.1 Node.js 安装

macOS 用户推荐使用 nvm 安装：

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 配置环境变量（如果使用 zsh）
echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.zshrc

# 重新加载配置
source ~/.zshrc

# 安装 Node.js LTS 版本
nvm install --lts
nvm use --lts

# 验证安装
node --version  # 应显示 v18.x.x 或更高版本
npm --version   # 应显示 8.x.x 或更高版本

1.2 安装开发工具

  1. 安装 Watchman（用于文件监控）：
# macOS
brew install watchman

# 验证安装
watchman --version
  1. 安装 Expo CLI：
npm install -g expo-cli

# 验证安装
expo --version

2. Android 开发环境搭建

2.1 安装 JDK

# macOS（使用 Homebrew）
brew tap homebrew/cask-versions
brew install --cask zulu17

# 配置 JAVA_HOME
echo 'export JAVA_HOME=$(/usr/libexec/java_home -v 17)' >> ~/.zshrc
echo 'export PATH=$JAVA_HOME/bin:$PATH' >> ~/.zshrc
source ~/.zshrc

# 验证安装
java -version
javac -version

2.2 安装 Android Studio

  1. 下载并安装 Android Studio
  2. 安装过程中选择 "Custom" 安装模式
  3. 确保选中以下组件：
    • Android SDK
    • Android SDK Platform
    • Android Virtual Device
    • Performance (Intel ® HAXM)

2.3 配置 Android SDK

  1. 打开 Android Studio
  2. 进入 Settings/Preferences > Appearance & Behavior > System Settings > Android SDK
  3. 在 SDK Platforms 标签页中选择：
    • Android 13.0 (API Level 33)
    • Android 12.0 (API Level 31)
  4. 在 SDK Tools 标签页中选择：
    • Android SDK Build-Tools
    • Android SDK Command-line Tools
    • Android Emulator
    • Android SDK Platform-Tools

2.4 配置环境变量

将以下内容添加到 ~/.zshrc：

# Android 环境变量
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

# 重新加载配置
source ~/.zshrc

2.5 创建 Android 虚拟设备

  1. 打开 Android Studio
  2. 点击 "Tools" > "Device Manager"
  3. 点击 "Create Virtual Device"
  4. 选择设备类型（推荐 Pixel 6）
  5. 选择系统镜像（推荐 API 33）
  6. 完成配置并启动虚拟设备

3. iOS 开发环境搭建

3.1 安装 Xcode

  1. 从 Mac App Store 安装 Xcode
  2. 安装 Xcode Command Line Tools：
xcode-select --install

3.2 安装 CocoaPods

# 安装 CocoaPods
sudo gem install cocoapods

# 验证安装
pod --version

3.3 配置 iOS 模拟器

  1. 打开 Xcode
  2. 进入 Xcode > Preferences > Locations
  3. 确保 Command Line Tools 已正确设置
  4. 创建 iOS 模拟器：
    • 打开 Xcode
    • Window > Devices and Simulators
    • 点击 "+" 创建新模拟器

4. 创建新项目

4.1 使用 Expo 创建项目

# 创建新项目
npx create-expo-app MyApp --template

# 进入项目目录
cd MyApp

# 初始化 TypeScript
npx expo customize tsconfig.json

# 安装依赖
npm install

4.2 项目配置

  1. 修改 app.json：
{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.myapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.yourcompany.myapp"
    }
  }
}
  1. 配置 TypeScript：

修改 tsconfig.json：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

5. 运行项目

5.1 启动 Android 模拟器

# 列出可用的 Android 模拟器
emulator -list-avds

# 启动指定的模拟器
emulator -avd <模拟器名称>

5.2 启动 iOS 模拟器

# 使用 Expo 启动 iOS 模拟器
npx expo run:ios

5.3 运行项目

# 启动开发服务器
npx expo start

# 在 Android 上运行
npx expo run:android

# 在 iOS 上运行
npx expo run:ios

6. 常见问题解决

6.1 Android 相关问题

  1. 模拟器无法启动
# 清理 Android Studio 缓存
cd ~/Library/Android/sdk/emulator
./emulator -avd <模拟器名称> -wipe-data
  1. Gradle 构建失败
# 清理 Gradle 缓存
cd android
./gradlew clean
cd ..

6.2 iOS 相关问题

  1. Pod 安装失败
cd ios
pod deintegrate
pod cache clean --all
pod install
cd ..
  1. 模拟器启动失败
  • 打开 Xcode
  • Window > Devices and Simulators
  • 删除现有模拟器并重新创建

6.3 通用问题

  1. Metro 打包器问题
# 清理 Metro 缓存
npx expo start --clear
  1. 依赖安装问题
# 清理 npm 缓存
npm cache clean --force

# 删除 node_modules
rm -rf node_modules
rm package-lock.json

# 重新安装依赖
npm install

环境检查清单

在开始开发之前，请确保：

  • Node.js 和 npm 已正确安装
  • Android Studio 和 SDK 已配置
  • Xcode 和 iOS 模拟器已设置（macOS）
  • 环境变量已正确配置
  • 虚拟设备可以正常启动
  • 项目可以成功运行

提示和技巧

  1. 开发工具推荐

    • VS Code + React Native 插件
    • React Native Debugger
    • Flipper（调试工具）

  2. 性能优化

    • 使用 Release 模式测试性能
    • 启用 Hermes 引擎
    • 合理使用开发者选项

  3. 调试技巧

    • 使用 Chrome 开发者工具
    • 启用 Hot Reloading
    • 使用 React Native Debugger 进行调试
avatar
文章
阅读
粉丝