Windows · React Native for Windows 入门

本指南将帮助你开始设置你的第一个 React Native for Windows 应用程序。

请确保你已安装所有开发依赖项。

有关如何设置 React Native 的信息，请参阅React Native 入门指南。

有兴趣迁移到React Native 的新架构吗？ React Native for Windows 对新架构的支持现在已在 0.76 中提供预览。请注意有几项关键更改，因此如果你想成为早期采用者，请查阅新架构指南中的信息。

创建一个新的 React Native 项目

在你希望项目目录所在的路径下调用以下命令

npx --yes @react-native-community/cli@latest init <projectName> --version ^0.79.0

进入这个新创建的目录

该命令将在一个新的子目录中创建你的项目，你必须先进入该子目录才能继续。

cd <projectName>

将 React Native Windows 添加到你的项目依赖项中

接下来，你需要添加 react-native-windows 作为依赖项。

使用 Yarn（推荐）

使用 NPM

yarn add react-native-windows@^0.79.0

npm install --save react-native-windows@^0.79.0

初始化 React Native Windows 原生代码和项目

最后，使用init-windows 命令初始化 React Native for Windows 应用程序

npx react-native init-windows --overwrite

注意：RNW 模板包含一个定制的 metro.config.js 文件，该文件旨在与标准 React Native 项目模板提供的默认配置完美合并。如果你正在启动一个新应用程序，覆盖 metro.config.js 应该没有影响。但是，如果你正在将 Windows 添加到具有已修改的 metro.config.js 文件的现有应用程序中，请务必在添加 RNW 后备份并重新应用你的修改。

运行 React Native Windows 应用程序

在运行 React Native Windows 应用程序之前，请确保浏览器已启动并正在运行。此外，请确保你的系统满足构建 Windows 应用程序的所有要求。

不使用 Visual Studio

在你的 React Native Windows 项目目录中，运行run-windows 命令
```
npx react-native run-windows
```
将打开一个新的命令提示符窗口，其中包含 React packager 和你的 React Native for Windows 应用程序。由于此步骤涉及构建整个项目和所有依赖项，因此首次运行可能需要一段时间。你现在可以开始开发了！:tada
使用 Visual Studio
- 从项目目录的根目录运行autolink-windows 命令，它将自动链接你的应用程序的依赖项。
```
npx react-native autolink-windows
```
- 在 Visual Studio 中打开应用程序文件夹中的解决方案文件（例如，如果你使用 AwesomeProject 作为 <projectName>，则为 AwesomeProject/windows/AwesomeProject.sln）
- 在 运行 按钮左侧和 团队 和 工具 菜单项下方，从组合框控件中选择 Debug 配置和 x64 平台。
- 从项目目录运行 yarn start（或 npm start），然后等待 React Native 打包器报告成功。
- 单击 VS 中平台组合框控件右侧的 运行 按钮，或选择 Debug->不调试启动 菜单项。现在你将看到你的新应用程序，Chrome 应该在新选项卡中加载 https://:8081/debugger-ui/。在 Chrome 中按 F12 或 Ctrl+Shift+I 打开其开发者工具。:tada
使用 VS Code
- 在 VS Code 中打开你的应用程序文件夹。
- 为 VS Code 安装 React Native Tools 插件。
- 在应用程序根目录中创建新文件 .vscode/launch.json 并粘贴以下配置
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Windows",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "windows"
    }
  ]
}
```
- 按 F5 或导航到调试菜单（或者按 Ctrl+Shift+D），然后在调试下拉菜单中选择“调试 Windows”并按绿色箭头运行应用程序。

编写原生模块

请参阅原生平台：概述。

构建独立的 React Native Windows 应用程序

按照以下步骤构建你的应用程序版本，你可以安装或发布到商店。此版本将你的捆绑包和资产打包到 APPX 包中，因此你无需运行 Metro。

在 Visual Studio 中打开解决方案
从“配置管理器”下拉菜单中选择“Release”配置。
构建解决方案。现在你可以无需先启动 Metro 即可启动。
如果要构建 APPX 包以共享或发布，请使用项目 > 发布 > 创建应用包... 选项。

默认情况下，“调试”配置使用 Web 调试器，这意味着应用程序的 JavaScript 代码在 Chrome 中运行。
如果“Release”和“Debug”配置之间运行时行为不同，请考虑禁用 App.cpp 或 App.xaml.cs 中的 UseWebDebugger 设置，以在“调试”配置中获得相同的行为。

适用于 Windows 的 React Native

0.79

原生模块 (Windows)

原生开发 (Windows)

Windows 入门