Aan de slag met ontwikkelen voor Android met React Native

Deze handleiding helpt u aan de slag te gaan met React Native in Windows om een platformoverschrijdende app te maken die werkt op Android-apparaten.

Overzicht

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.

Aan de slag met React Native door vereiste hulpprogramma's te installeren

1. Installeer Visual Studio Code (of de gewenste code-editor).

2. Installeer Android Studio voor Windows en stel de omgevingsvariabele ANDROID_HOME in. Volg de instructies in Je Omgeving Instellen - React Native. Zorg ervoor dat u de selectie ontwikkelingsbesturingssysteem instelt op 'Windows' en de selectie van het doelbesturingssysteem op Android.

3. Stel de omgevingsvariabele JAVA_HOME in. Voor het gradle-hulpprogramma dat wordt gebruikt om Android-apps te bouwen, is een specifieke versievereiste vereist voor de Java SDK. Als u de ondersteunde versie wilt vinden, gaat u in Android Studio naar >. Noteer het pad dat is geselecteerd in de vervolgkeuzelijst Gradle JDK . Stel de omgevingsvariabele JAVA_HOME in op dit pad met behulp van de volgende stappen:

   • Voer in het zoekmenu van Windows het volgende in: 'Bewerk de omgevingsvariabelen van het systeem'. Hiermee opent u het venster Systeemeigenschappen .
   • Kies Omgevingsvariabelen... en kies vervolgens Nieuw... onder Gebruikersvariabelen.
   • Stel de variabelenaam in op JAVA_HOME en stel de waarde in op het pad dat u uit Android Studio hebt opgehaald.

4. NodeJS voor Windows installeren U kunt overwegen om Node Version Manager (nvm) voor Windows te gebruiken als u met meerdere projecten en versie van NodeJS werkt. U wordt aangeraden de nieuwste LTS-versie voor nieuwe projecten te installeren.

Opmerking

U kunt ook overwegen om de Windows-terminal te installeren en te gebruiken voor het werken met uw favoriete opdrachtregelinterface (CLI), evenals Git voor versiebeheer. De Java JDK wordt geleverd met Android Studio v2.2+, maar als u uw JDK afzonderlijk van Android Studio wilt bijwerken, gebruikt u het Windows x64 Installer.

Een nieuw project maken met React Native

1. Gebruik npx, het pakketrunner-hulpprogramma dat is geïnstalleerd met npm om een nieuw React Native-project te maken. vanaf de Windows-opdrachtprompt, PowerShell, Windows Terminal of de geïntegreerde terminal in VS Code (Geïntegreerde terminal weergeven > ).

   npx react-native init MyReactNativeApp
   

   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
   

2. Open de nieuwe map MyReactNativeApp:

   cd MyReactNativeApp
   

3. Als u uw project wilt uitvoeren op een Android-hardwareapparaat, sluit u het apparaat aan op uw computer met een USB-kabel.

4. Als u uw project wilt uitvoeren op een Android-emulator, hoeft u geen actie te ondernemen wanneer Android Studio wordt geïnstalleerd met een standaardemulator geïnstalleerd. Als u uw app wilt uitvoeren op de emulator voor een bepaald apparaat. Klik op de AVD Manager knop in de werkbalk.

   .

5. Voer de volgende opdracht in om uw project uit te voeren. Hiermee opent u een nieuw consolevenster met Node Metro Bundler.

   npx react-native run-android
   

   

   

   Opmerking

   Als u een nieuwe installatie van Android Studio gebruikt en nog geen andere Android-ontwikkeling hebt uitgevoerd, krijgt u mogelijk fouten op de opdrachtregel wanneer u de app uitvoert over het accepteren van licenties voor de Android SDK. Zoals 'Waarschuwing: Licentie voor pakket Android SDK Platform 29 niet geaccepteerd'. U kunt dit oplossen door te klikken op de knop SDK Manager in Android Studio . U kunt de licenties ook vermelden en accepteren met de volgende opdracht, zodat u het pad naar de SDK-locatie op uw computer gebruikt.

   C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses
   

6. Als u de app wilt wijzigen, opent u de MyReactNativeApp projectmap in de IDE van uw keuze. Vs Code of Android Studio wordt aangeraden.

7. De projectsjabloon die door react-native init is gemaakt, gebruikt een hoofdpagina met de naam App.js. Deze pagina is vooraf ingevuld met veel nuttige koppelingen naar informatie over React Native-ontwikkeling. Voeg tekst toe aan het eerste tekstelement , zoals de 'HALLO WERELD!'-tekenreeks die hieronder wordt weergegeven.

   <Text style={styles.sectionDescription}>
     Edit <Text style={styles.highlight}>App.js</Text> to change this
     screen and then come back to see your edits. HELLO WORLD!
   </Text>
   

8. Laad de app opnieuw om de wijzigingen weer te geven die u hebt aangebracht. Er zijn verschillende manieren om dit aan te pakken.

   • Typ 'r' in het consolevenster van Metro Bundler.
   • Dubbeltik in de Android-apparaatemulator op 'r' op het toetsenbord.
   • Schud het apparaat op een android-hardwareapparaat om het react native foutopsporingsmenu weer te geven en selecteer Opnieuw laden.