开始使用 React Native for Desktop 生成桌面应用

项目
11/09/2024

React Native for Desktop 允许使用 React 创建通用 Windows 平台（UWP）应用。

React Native 概述

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

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

先决条件

可以在“系统要求”页上找到使用 React Native for Desktop 的设置要求。确保打开 Windows 设置应用中的开发人员模式。

安装 React Native for Desktop

可以按照以下步骤使用 React Native for Desktop 创建 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
```
切换到项目目录并运行以下命令以安装 React Native for Desktop 包：
```
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”，然后按绿色箭头运行应用程序。

通过