当前位置：首页 > ai >正文

React Navive初识

ai 2025/6/28 4:09:20

文章目录

- 搭建开发环境
- - 安装 Node、homebrew、Watchman
  - - 安装 Node
    - 安装 homebrew
    - 安装 watchman
  - 安装 React Native 的命令行工具（react-native-cli）
  - 创建新项目
  - 编译并运行 React Native 应用
  - - 在 ios 模拟器上运行
- 调试
- - 访问 App 内的开发菜单

搭建开发环境

在开始使用 React Native 进行开发之前，我们需要搭建好相应的开发环境。以下是详细的搭建步骤，官方文档可参考：参考网址

安装 Node、homebrew、Watchman

安装 Node

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，React Native 开发依赖 Node 来运行 JavaScript 代码。你可以从 Node.js 官方网站（官方网站）下载适合你操作系统的安装包进行安装。安装完成后，在终端中输入以下命令来验证 Node 和 npm（Node 包管理器）是否安装成功：

node -v
npm -v

如果成功输出版本号，则说明安装成功。

安装 homebrew

Homebrew 是 macOS 上的一个包管理工具，它可以帮助我们方便地安装各种软件包。在终端中执行以下命令来安装 Homebrew：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

上述命令会从 Homebrew 的官方仓库下载安装脚本并执行。安装过程中可能需要你输入管理员密码进行授权。安装完成后，你可以使用以下命令来验证 Homebrew 是否安装成功：

brew --version

安装 watchman

brew install watchman

Watchman 是由 Facebook 提供的监视文件系统变更的工具。在 React Native 开发中，它起着重要的作用。当我们对项目中的文件进行修改时，Watchman 可以快速捕捉到这些变化，并通知 packager（打包服务）。这样，packager 就能及时重新打包并刷新应用，从而提高开发时的性能，实现实时刷新的效果。

安装 React Native 的命令行工具（react-native-cli）

安装 react-native-cli：

npm install -g react-native-cli

npm 是 Node.js 的包管理工具，install -g 表示全局安装。React Native 的命令行工具 react-native-cli 为我们提供了一系列方便的命令，用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。例如，我们可以使用它来快速创建一个新的 React Native 项目，或者启动项目的开发服务器。

创建新项目

react-native init MyApp --version 0.44.3

react-native init 是 react-native-cli 提供的一个命令，用于初始化一个新的 React Native 项目。MyApp 是项目的名称，你可以根据自己的需求进行修改。--version 0.44.3 表示指定项目使用的 React Native 版本为 0.44.3。如果你不指定版本，默认会使用最新版本。执行该命令后，react-native-cli 会自动下载并配置项目所需的依赖，创建项目的基本结构。

编译并运行 React Native 应用

在 ios 模拟器上运行

react-native run-ios

react-native run-ios 命令用于在 iOS 模拟器上编译并运行 React Native 应用。在执行该命令之前，请确保你已经安装了 Xcode 开发环境，因为 iOS 开发依赖于 Xcode。执行该命令后，React Native 会自动编译项目代码，并在 iOS 模拟器中启动应用。