使用適用於 Windows 的 React Native 開始建置傳統型應用程式

發行項
03/13/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 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
```
切換至專案目錄，然後執行下列命令來安裝適用於 Windows 的 React Native 封裝：
```
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]，然後按綠色箭號以執行應用程式。