Aan de slag met het bouwen van een desktop-app met React Native voor Desktop

Met React Native voor Desktop kunt u een UWP-app (Universal Windows Platform) maken met React.

Overzicht van React Native

React Native is een opensource-framework voor mobiele toepassingen dat is gemaakt door Facebook. Het wordt gebruikt voor het ontwikkelen van toepassingen voor Android, iOS, Web en UWP (Windows) die systeemeigen UI-besturingselementen bieden en volledige toegang tot het systeemeigen platform. Voor het werken met React Native is een goed begrip van de basisprincipes van JavaScript vereist.

Zie de react-overzichtspagina voor meer algemene informatie over React.

Vereiste voorwaarden

De installatievereisten voor het gebruik van React Native voor Desktop vindt u op de pagina Systeemvereisten . Zorg ervoor dat de ontwikkelaarsmodus is ingeschakeld in Windows-instellingen.

React Native installeren voor Desktop

U kunt een Windows-bureaublad-app maken met React Native voor Desktop door deze stappen uit te voeren.

Open een opdrachtregelvenster (terminal) en navigeer naar de map waar u uw Windows-bureaublad-app-project wilt maken.
U kunt deze opdracht gebruiken met de Node Package Executor (NPX) om een React Native-project te maken zonder dat u extra hulpprogramma's lokaal of globaal hoeft te installeren. Met de opdracht wordt een React Native-app gegenereerd in de map die is opgegeven door <projectName>.
```
npx react-native init <projectName>
```
Als u een nieuw project wilt starten met een specifieke React Native-versie, kunt u het --version argument gebruiken. Zie Versies - React Native voor meer informatie over versies van React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Ga naar de projectmap en voer de volgende opdracht uit om de React Native for Desktop-pakketten te installeren:
```
cd projectName
npx react-native-windows-init --overwrite
```
Als u de app wilt uitvoeren, start u eerst uw webbrowser (bijvoorbeeld. Microsoft Edge) voert u de volgende opdracht uit:
```
npx react-native run-windows
```

Fouten opsporen in uw React Native-bureaublad-app met Visual Studio

Installeer Visual Studio 2022 met de volgende opties ingeschakeld:
- Werkbelastingen: Ontwikkeling met Universal Windows Platform en Desktopontwikkeling met C++.
- Afzonderlijke onderdelen: Ontwikkelingsactiviteiten en Node.js ontwikkelingsondersteuning.
Open het oplossingsbestand in de toepassingsmap in Visual Studio (bijvoorbeeld AwesomeProject/windows/AwesomeProject.sln als u AwesomeProject als <projectName> hebt gebruikt).
Selecteer de Debug-configuratie en het x64-platform in de combobox aan de linkerkant van de Uitvoeren-knop en onder het menu-item Team en Hulpmiddelen.
Voer yarn start uit vanuit uw projectmap, en wacht totdat de React Native-packager aangeeft dat het is voltooid.
Selecteer Uitvoeren rechts van de platformkeuzelijst in VS, of selecteer de menuoptie Debug->Starten zonder debuggen. U ziet nu uw nieuwe app en Chrome zou nu http://localhost:8081/debugger-ui/ in een nieuw tabblad moeten hebben geladen.
Selecteer de F12-toets of Ctrl+Shift+I om Ontwikkelhulpprogramma's in uw webbrowser te openen.

Fouten opsporen in uw React Native-bureaublad-app met Visual Studio Code

Visual Studio Code installeren
Open de map met toepassingen in VS Code.
Installeer de React Native Tools-invoegtoepassing voor VS Code.

Maak een nieuw bestand in de hoofdmap van de toepassingen, .vscode/launch.json en plak de volgende configuratie:

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

Druk op F5 of navigeer naar het foutopsporingsmenu (u kunt ook op Ctrl+Shift+D drukken) en selecteer in de vervolgkeuzelijst Foutopsporing 'Fouten opsporen in Windows' en druk op de groene pijl om de toepassing uit te voeren.

Aanvullende bronnen

Feedback

Is deze pagina nuttig?

Last updated on 2025-05-03