Sdílet prostřednictvím

Začínáme sestavovat desktopovou aplikaci pomocí React Native for Desktop

React Native for Desktop umožňuje vytvořit aplikaci pro Univerzální platformu Windows (UPW) pomocí Reactu.

Přehled React Native

React Native je opensourcová architektura mobilních aplikací vytvořená facebookem. Používá se k vývoji aplikací pro Android, iOS, Web a UPW (Windows), které poskytují nativní ovládací prvky uživatelského rozhraní a úplný přístup k nativní platformě. Práce s React Native vyžaduje pochopení základů JavaScriptu.

Další obecné informace o Reactu najdete na stránce s přehledem Reactu .

Požadavky

Požadavky na nastavení pro použití React Native for Desktop najdete na stránce Požadavky na systém . Ujistěte se, že je v nastavení windows zapnutý vývojářský režim.

Nainstalujte React Native pro desktop

Pomocí následujícího postupu můžete vytvořit desktopovou aplikaci pro Windows pomocí React Native for Desktopu.

  1. Otevřete okno příkazového řádku (terminál) a přejděte do adresáře, do kterého chcete vytvořit projekt desktopové aplikace pro Windows.

  2. Tento příkaz můžete použít s nástrojem Node Package Executor (NPX) k vytvoření nativního projektu React, aniž byste museli instalovat místně nebo globálně instalovat další nástroje. Příkaz vygeneruje aplikaci React Native v adresáři určeném uživatelem <projectName>.

    npx react-native init <projectName>

    Pokud chcete spustit nový projekt s konkrétní verzí React Native, můžete použít --version argument. Informace o verzích React Native naleznete v tématu Verze – React Native.

    npx react-native@X.XX.X init  <projectName> --version X.XX.X

  3. Přepněte do adresáře projektu a spuštěním následujícího příkazu nainstalujte balíčky React Native for Desktop:

    cd projectName
npx react-native-windows-init --overwrite

  4. Pokud chcete aplikaci spustit, nejprve spusťte webový prohlížeč (tj. Microsoft Edge) a pak spusťte následující příkaz:

    npx react-native run-windows

Ladění desktopové aplikace React Native pomocí sady Visual Studio

  • Nainstalujte Visual Studio 2022 s následujícími možnostmi:

    • Úlohy: Vývoj univerzální platformy Windows a vývoj desktopových aplikací pomocí jazyka C++.
    • Jednotlivé komponenty: Vývojové aktivity a podpora vývoje Node.js.

  • Otevřete soubor řešení ve složce aplikace v sadě Visual Studio (například AwesomeProject/windows/AwesomeProject.sln, pokud jste jako název projektu< použili AwesomeProject>).

  • Vyberte konfiguraci ladění a platformu x64 z prvků kombinovaného pole nalevo od tlačítka Spustit, pod položkou nabídky Tým a nástroje.

  • Spusťte yarn start z adresáře projektu a počkejte, až balíček React Native nahlásí úspěch.

  • Vyberte Spustit napravo od ovládacího prvku pole se seznamem platformy ve VS nebo vyberte položku nabídky Ladit>Spustit bez ladění. Nyní vidíte svou novou aplikaci a Chrome by měl načíst http://localhost:8081/debugger-ui/ v nové kartě.

  • Vyberte klávesu F12 nebo Ctrl+Shift+I a otevřete vývojářské nástroje ve webovém prohlížeči.

Ladění desktopové aplikace React Native pomocí editoru Visual Studio Code

  • Nainstalujte Visual Studio Code

  • Otevřete složku aplikací ve VS Code.

  • Nainstalujte modul plug-in React Native Tools pro VS Code.

  • V kořenovém adresáři aplikací vytvořte nový soubor .vscode/launch.json a vložte následující konfiguraci:

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

  • Stiskněte klávesu F5 nebo přejděte do nabídky ladění (případně stiskněte Kombinaci kláves Ctrl+Shift+D) a v rozevíracím seznamu Ladění vyberte "Ladit windows" a stisknutím zelené šipky spusťte aplikaci.

Dodatečné zdroje

  • Last updated on