React Native - 环境设置

React Native - 环境搭建

搭建开发环境是构建 React Native 应用的第一步。搭建过程取决于您的开发操作系统 (Windows, macOS 或 Linux) 和您要针对的移动操作系统 (iOS 或 Android)。

React Native 提供了两种主要的入门方式：

• Expo Go：最简单的入门方式。您用 JavaScript/TypeScript 编写应用，并使用手机上的 Expo Go 应用即时查看更改。适用于许多用例，但如果您需要 Expo 预构建 SDK 不支持的自定义原生代码，可能会有一些限制。
• React Native CLI (原生工作流)：提供更大的灵活性和控制。您需要安装和配置原生构建工具，如 Android Studio 和 Xcode。本教程重点介绍 React Native CLI 的搭建过程。

核心依赖项 (React Native CLI)

1. Node.js：安装 LTS (长期支持) 版本的 Node.js。Node.js 附带 npm (Node 包管理器)。您可以从 nodejs.org 下载。我们推荐使用版本管理器，如 nvm。
2. Watchman (macOS/Linux)：一个文件监听服务。推荐使用以获得更好的性能。在 macOS 上通过 Homebrew 安装：brew install watchman。
3. Java Development Kit (JDK)：Android 开发必需。安装一个较新版本（例如 OpenJDK 11 或更高版本）。您可以通过包管理器（如 Windows 上的 Chocolatey，macOS 上的 Homebrew）或直接安装。
4. Android Studio：Android 开发必需。它包含 Android SDK、模拟器和命令行工具。从 developer.android.com/studio 下载。

步骤 1：安装 React Native CLI

React Native CLI 现在通常使用 npx 调用，它使用项目捆绑的 CLI 版本。您通常不再需要全局安装 react-native-cli，尽管一些旧指南可能提到它。

步骤 2：创建新项目

打开您的终端或命令提示符，导航到您想创建项目的目录，然后运行：

npx react-native init YourProjectName

将 YourProjectName 替换为您期望的项目名称。此命令将创建一个新目录，名称即为您的项目名称，其中包含所有必需的文件和依赖项。

步骤 3：配置 Android 开发环境

1. 安装 Android Studio：按照适用于您操作系统的安装说明进行。
2. 安装 Android SDK：打开 Android Studio，进入 SDK Manager (Configure > SDK Manager 或 Tools > SDK Manager)。确保您已安装一个 SDK Platform（例如 Android 12.0 - API Level 31 或更高版本）。
3. 安装 Android SDK Build-Tools：在 SDK Manager 的 ‘SDK Tools’ 选项卡下，确保您安装了最新版本的 ‘Android SDK Build-Tools’。
4. 配置环境变量：设置 ANDROID_HOME (或 ANDROID_SDK_ROOT) 环境变量指向您的 Android SDK 位置（例如 macOS 上是 ~/Library/Android/sdk，Windows 上是 C:\Users\YourUser\AppData\Local\Android\Sdk）。将 platform-tools 添加到您的 PATH 中（例如 ANDROID_HOME/platform-tools）。
5. 配置 Android Virtual Device (AVD)：在 Android Studio 中，打开 AVD Manager (Configure > AVD Manager 或 Tools > AVD Manager)。点击 ‘Create Virtual Device…’，选择一个设备定义，选择一个系统镜像（如果需要则下载），然后完成设置。启动您的 AVD。

步骤 4：配置 iOS 开发环境 (仅 macOS)

1. 安装 Xcode：从 Mac App Store 下载并安装 Xcode。Xcode 包含 iOS SDK、模拟器和所需的构建工具。
2. 安装 Xcode Command Line Tools：打开 Xcode，进入 Preferences > Locations，在 Command Line Tools 下拉菜单中选择最新版本。
3. 安装 CocoaPods：CocoaPods 是一个用于 Swift 和 Objective-C Cocoa 项目的依赖管理器。使用 RubyGems 安装：sudo gem install cocoapods。
4. 安装 Pods：导航到您的 React Native 项目中的 ios 目录并运行 pod install。

步骤 5：运行您的应用

要在 Android 上运行您的应用（请确保模拟器已运行或设备已连接）：

cd YourProjectName
npx react-native run-android

要在 iOS 上运行您的应用（仅限 macOS，请确保 iOS 模拟器已运行或设备已连接）：

cd YourProjectName
npx react-native run-ios

如果一切设置正确，您的应用应该会在选定的设备/模拟器上启动，并且 Metro 打包器（JavaScript bundler）将在一个新的终端窗口中启动。您对 JavaScript 代码所做的更改将使用 Fast Refresh 即时应用。

有关详细的、针对特定平台的说明和故障排除，请务必参考官方 React Native 环境搭建指南。