Windows 的 React Native 生成跨平台桌面应用，很难用入门

短命女 2023-10-09 19:58 16阅读 0赞

![dd6d3cf6c25a4ce1ad34a5cefec7a3ca.png][]有能力的可以看官网：[Get Started with Windows · React Native for Windows + macOS][Get Started with Windows _ React Native for Windows _ macOS]

不是我乱吹，是真的很难用，环境搭建就非常难受，各种依赖报错，各种依赖调试，完全没有tauri来的舒服顺畅，甚至为了安装他这个环境我花了一上午时间，期间无数次想放弃，但是耐不住好奇心，就是想体验一下这个跨平台的性能，并且还把我原来的node环境搞坏了，心累啊，所以如果你还在执着这个Rnwindows的，我先给你说快快退下吧，你还有另外一个选择，那就是tauri。

其实我是不想写这篇文章的，但是处于好奇心，还是复制官网的来吧：

## 环境安装 ##

[这就是难受的开始：System Requirements · React Native for Windows + macOS][System Requirements _ React Native for Windows _ macOS]

### 安装适用于 Windows 的 React Native ###

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

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

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

*  [安装 Visual Studio 2019][Visual Studio 2019]，并选中以下选项：
    
     *  工作负载：通用 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][Visual Studio Code]
 *  在 VS Code 中打开应用程序文件夹。
 *  安装 [VS Code 的 React Native 工具插件][VS Code _ React Native]。
 *  在应用程序根目录 .vscode/launch.json 中创建新文件，并粘贴以下配置：
    
    JSON复制
    
        {
            "version": "0.2.0",
            "configurations": [
                {
                    "name": "Debug Windows",
                    "cwd": "${workspaceFolder}",
                    "type": "reactnative",
                    "request": "launch",
                    "platform": "windows"
                }
            ]
        }
 *  按 F5 或导航到调试菜单（或者按 Ctrl+Shift+D），在“调试”下拉列表中选择“调试 Windows”，然后按绿色箭头运行应用程序。

[dd6d3cf6c25a4ce1ad34a5cefec7a3ca.png]: https://img-blog.csdnimg.cn/dd6d3cf6c25a4ce1ad34a5cefec7a3ca.png
[Get Started with Windows _ React Native for Windows _ macOS]: https://microsoft.github.io/react-native-windows/docs/getting-started#running-a-react-native-windows-app
[System Requirements _ React Native for Windows _ macOS]: https://microsoft.github.io/react-native-windows/docs/rnw-dependencies
[Visual Studio 2019]: https://learn.microsoft.com/zh-cn/visualstudio/install/install-visual-studio
[Visual Studio Code]: https://code.visualstudio.com/download
[VS Code _ React Native]: https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native