開始使用 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 Package Executor (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
```
若要執行應用程式，請先啟動您的網頁瀏覽器 (即 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，以在網頁瀏覽器中開啟開發人員工具。

使用 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]，然後按綠色箭號以執行應用程式。

共用方式為