开始使用适用于 Windows 的 React Native 生成桌面应用

项目
04/30/2024

通过适用于 Windows 的 React Native，可使用 React 创建通用 Windows 平台 (UWP) 应用。

React Native 概述

React Native 是由 Facebook 创建的开源移动应用程序框架。它用于开发适用于 Android、iOS、Web 和 UWP (Windows) 的应用程序，提供本机 UI 控制和对本机平台的完全访问权限。使用 React Native 的前提是需要了解 JavaScript 基础知识。

有关 React 的更多常规信息，请参阅 React 概述页。

必备条件

使用适用于 Windows 的 React Native 的安装要求可以在系统要求页中找到。确保打开 Windows 设置应用中的开发人员模式。

安装适用于 Windows 的 React Native

遵循以下步骤，使用适用于 Windows 的 React Native 创建 Windows 桌面应用。

打开命令行窗口（终端），并导航到要在其中创建 Windows 桌面应用项目的目录。
可以通过在 Node 包执行器 (NPX) 中使用此命令来创建 React Native 项目，而无需在本地或全局安装其他工具。命令将在 <projectName> 指定的目录中生成 React Native 应用。
```
npx react-native init <projectName>
```
如果要使用特定 React Native 版本启动新项目，可以使用 --version 参数。有关 React Native 版本的信息，请参阅版本 - React Native。
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
切换到项目目录，然后运行以下命令以安装适用于 Windows 的 React Native 的包：
```
cd projectName
npx react-native-windows-init --overwrite
```
要运行应用，请首先启动 Web 浏览器（如 Microsoft Edge），然后执行以下命令：
```
npx react-native run-windows
```

使用 Visual Studio 调试 React Native 桌面应用

安装 Visual Studio 2022，并选中以下选项：
- 工作负载：通用 Windows 平台开发和使用 C++ 的桌面开发。
- 单个组件：开发活动和 Node.js 开发支持。
在 Visual Studio 的应用程序文件夹（例如，若使用 AwesomeProject 作为 <projectName>，则为 AwesomeProject/windows/AwesomeProject.sln）中打开解决方案文件。
从“运行”按钮左侧的组合框控件中和“团队和工具”菜单项下方选择“调试”配置和 x64 平台。
从项目目录运行 yarn start，然后等待 React Native 包生成工具发出报告操作成功。
选择 VS 中平台组合框控件右侧的“运行”，或选择“调试”->“启动(不调试)”菜单项。现在，你应该可看到新应用且 Chrome 已经在新选项卡中加载 http://localhost:8081/debugger-ui/ 。
选择 F12 键或 Ctrl+Shift+I，打开 Web 浏览器中的开发人员工具。

使用 Visual Studio Code 对 React Native 桌面应用进行调试

安装 Visual Studio Code
在 VS Code 中打开应用程序文件夹。
安装 VS Code 的 React Native 工具插件。

在应用程序根目录 .vscode/launch.json 中创建新文件，并粘贴以下配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

按 F5 或导航到调试菜单（或者按 Ctrl+Shift+D），在“调试”下拉列表中选择“调试 Windows”，然后按绿色箭头运行应用程序。