Megosztás:

Asztali alkalmazás létrehozása a React Native for Desktop használatával

A React Native for Desktop lehetővé teszi egy univerzális Windows-platform (UWP) alkalmazás létrehozását a React használatával.

A React natív verziójának áttekintése

A React Native egy nyílt forráskódú mobilalkalmazás-keretrendszer , amelyet a Facebook hozott létre. Android, iOS, Web és UWP (Windows) alkalmazások fejlesztésére szolgál, amelyek natív felhasználói felületi vezérlőket és teljes hozzáférést biztosítanak a natív platformhoz. A React Native használatához ismerni kell a JavaScript alapjait.

A React szolgáltatással kapcsolatos általános információkért tekintse meg a React áttekintési oldalát.

Előfeltételek

A React Native for Desktop használatára vonatkozó beállítási követelmények a Rendszerkövetelmények lapon találhatók. Győződjön meg arról, hogy a Fejlesztői mód be van kapcsolva a Windows beállításai között.

A React Native for Desktop telepítése

Az alábbi lépések végrehajtásával létrehozhat egy Asztali Windows-alkalmazást a React Native for Desktop használatával.

  1. Nyisson meg egy parancssori ablakot (terminált), és lépjen arra a könyvtárra, ahol létre szeretné hozni a Windows asztali alkalmazásprojektet.

  2. Ezt a parancsot a Csomópontcsomag-végrehajtóval (NPX) használhatja a React natív projekt létrehozásához anélkül, hogy helyileg vagy globálisan további eszközöket kellene telepítenie. A parancs létrehoz egy React natív alkalmazást a megadott <projectName>könyvtárban.

    npx react-native init <projectName>

    Ha egy új projektet egy adott React natív verzióval szeretne elindítani, használhatja az --version argumentumot. A React Native verzióival kapcsolatos információkért lásd: Verziók – React Natív.

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

  3. Váltson a projektkönyvtárra, és futtassa a következő parancsot a React Native for Desktop csomagok telepítéséhez:

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

  4. Az alkalmazás futtatásához először indítsa el a webböngészőt (azaz. Microsoft Edge), majd hajtsa végre a következő parancsot:

    npx react-native run-windows

A React natív asztali alkalmazás hibakeresése a Visual Studióval

  • Telepítse a Visual Studio 2022-t a következő beállításokkal:

    • Számítási feladatok: Univerzális Windows platformfejlesztés és asztali fejlesztés a C++ használatával.
    • Egyéni összetevők: Fejlesztési tevékenységek & Node.js fejlesztési támogatás.

  • Nyissa meg a megoldásfájlt a Visual Studio alkalmazásmappájában (például AwesomeProject/windows/AwesomeProject.sln, ha az AwesomeProjectet projectName-ként <>használta).

  • Válassza ki a hibakeresési konfigurációt és az x64 platformot a kombinált lista vezérlőiről a Futtatás gomb bal oldalán, valamint a Csapat és eszközök menüelem alatt.

  • Futtassa a yarn start-t a projektkönyvtárból, és várja meg, amíg a React Native csomagoló jelentést ad a sikerről.

  • Válassza Futtassa a a VS platform kombinált lista vezérlőelemétől jobbra, vagy válassza a Hibakeresés>Indítás hibakeresés nélkül menüpontot. Az új alkalmazásod most látható, és a Chrome-nak be kellett volna töltenie a http://localhost:8081/debugger-ui/-et egy új lapon.

  • Válassza az F12 billentyűt vagy a Ctrl+Shift+I billentyűkombinációt a fejlesztői eszközök webböngészőben való megnyitásához.

A React natív asztali alkalmazás hibakeresése a Visual Studio Code használatával

  • Telepítse a Visual Studio Code-ot

  • Nyissa meg az alkalmazásmappát a VS Code-ban.

  • Telepítse a React Native Tools beépülő modult a VS Codeszámára.

  • Hozzon létre egy új fájlt az alkalmazások gyökérkönyvtárában ,vscode/launch.json, és illessze be a következő konfigurációt:

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

  • Nyomja le az F5 billentyűt, vagy lépjen a hibakeresési menüre (másik lehetőségként nyomja le a Ctrl+Shift+D billentyűkombinációt), majd a Hibakeresés legördülő menüben válassza a "Windows hibakeresése" lehetőséget, és nyomja le a zöld nyílbillentyűt az alkalmazás futtatásához.

További erőforrások

  • Last updated on