Wprowadzenie do tworzenia aplikacji klasycznej przy użyciu oprogramowania React Native for Desktop

2025-05-03

Rozwiązanie React Native for Desktop umożliwia utworzenie aplikacji platformy uniwersalnej systemu Windows (UWP) przy użyciu platformy React.

Omówienie oprogramowania React Native

React Native to platforma aplikacji mobilnych typu open source utworzona przez serwis Facebook open source. Służy do tworzenia aplikacji dla systemów Android, iOS, Web i UWP (Windows) zapewniających natywne kontrolki interfejsu użytkownika i pełny dostęp do platformy natywnej. Praca z platformą React Native wymaga zrozumienia podstaw języka JavaScript.

Aby uzyskać więcej ogólnych informacji na temat platformy React, zobacz stronę przeglądu platformy React .

Wymagania wstępne

Wymagania dotyczące konfiguracji dotyczące korzystania z oprogramowania React Native for Desktop można znaleźć na stronie Wymagania systemowe . Upewnij się, że tryb dewelopera jest włączony w aplikacji Ustawienia systemu Windows.

Instalowanie oprogramowania React Native dla programu Desktop

Aplikację klasyczną systemu Windows można utworzyć przy użyciu oprogramowania React Native for Desktop, wykonując następujące kroki.

Otwórz okno wiersza polecenia (terminal) i przejdź do katalogu, w którym chcesz utworzyć projekt aplikacji klasycznej systemu Windows.
Tego polecenia można użyć z narzędziem Node Package Executor (NPX), aby utworzyć projekt React Native bez konieczności instalowania dodatkowych narzędzi lokalnie lub globalnie. Polecenie wygeneruje aplikację React Native w katalogu określonym przez <projectName>.
```
npx react-native init <projectName>
```
Jeśli chcesz uruchomić nowy projekt z określoną wersją oprogramowania React Native, możesz użyć argumentu --version . Aby uzyskać informacje o wersjach oprogramowania React Native, zobacz Wersje — React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Przejdź do katalogu projektu i uruchom następujące polecenie, aby zainstalować pakiety React Native for Desktop:
```
cd projectName
npx react-native-windows-init --overwrite
```
Aby uruchomić aplikację, najpierw uruchom przeglądarkę internetową (tj. Microsoft Edge), a następnie wykonaj następujące polecenie:
```
npx react-native run-windows
```

Debugowanie aplikacji klasycznej React Native przy użyciu programu Visual Studio

Zainstaluj program Visual Studio 2022 z zaznaczonymi następującymi opcjami:
- Obciążenia: programowanie na platformie uniwersalnej Windows i programowanie aplikacji desktopowych za pomocą języka C++.
- Poszczególne składniki: działania programistyczne i obsługa programowania Node.js.
Otwórz plik rozwiązania w folderze aplikacji w programie Visual Studio (np. AwesomeProject/windows/AwesomeProject.sln, jeśli użyłeś AwesomeProject jako <projectName>).
Wybierz konfigurację Debug i platformę x64 z listy rozwijanej po lewej stronie przycisku Uruchom oraz pod elementem menu Zespół i narzędzia.
Uruchom yarn start z katalogu projektu i poczekaj, aż React Native packager zgłosi powodzenie.
Wybierz pozycję Uruchom po prawej stronie kontrolki pola kombi platformy w programie Visual Studio, lub wybierz pozycję menu Debuguj>Rozpocznij bez debugowania. Teraz zobaczysz swoją nową aplikację i przeglądarka Chrome powinna załadować http://localhost:8081/debugger-ui/ na nowej karcie.
Wybierz F12 lub Ctrl+Shift+I, aby otworzyć narzędzia deweloperskie w przeglądarce internetowej.

Debugowanie aplikacji klasycznej React Native przy użyciu programu Visual Studio Code

Instalowanie programu Visual Studio Code
Otwórz folder aplikacji w programie VS Code.
Zainstaluj wtyczkę React Native Tools dla programu VS Code.

Utwórz nowy plik w katalogu głównym aplikacji . vscode/launch.json i wklej następującą konfigurację:

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

Naciśnij F5 lub przejdź do menu debugowania (alternatywnie naciśnij Ctrl+Shift+D), a następnie na liście rozwijanej Debuguj wybierz pozycję "Debuguj system Windows" i naciśnij zieloną strzałkę, aby uruchomić aplikację.

Udostępnij za pośrednictwem