文章目录
- 搭建开发环境
- 安装 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 模拟器中启动应用。
调试
在开发过程中,调试是一个非常重要的环节。官网文档提供了详细的调试指南:调试指南
访问 App 内的开发菜单
在开发过程中,我们可以通过访问 App 内的开发菜单来进行一些调试操作,如开启调试模式、查看日志等。
如果是在 iOS 模拟器中运行,还可以按下 Command + D
快捷键来打开开发菜单。对于 Android 模拟器,对应的快捷键是 Command⌘ + M
(在 Windows 系统上可能是 F1
或者 F2
)。另外,我们也可以直接在命令行中运行以下命令来发送菜单键命令:
adb shell input keyevent 82
adb
是 Android Debug Bridge 的缩写,它是一个通用的命令行工具,用于与连接的 Android 设备或模拟器进行通信。adb shell input keyevent 82
命令会模拟按下菜单键的操作,从而打开 Android 应用的开发菜单。