Kom igång med att utveckla för Android med React Native

Den här guiden hjälper dig att komma igång med React Native i Windows för att skapa en plattformsoberoende app som fungerar på Android-enheter.

Översikt

React Native är ett ramverk för mobilprogram som skapats av Facebook med öppen källkod. Den används för att utveckla program för Android, iOS, Web och UWP (Windows) som tillhandahåller interna användargränssnittskontroller och fullständig åtkomst till den interna plattformen. Att arbeta med React Native kräver en förståelse av grunderna i JavaScript.

Kom igång med React Native genom att installera nödvändiga verktyg

1. Installera Visual Studio Code (eller valfri kodredigerare).

2. Installera Android Studio för Windows och ange miljövariabeln ANDROID_HOME. Följ anvisningarna i Konfigurera din miljö – React Native. Se till att ställa in valet av utvecklingsoperativsystem till "Windows" och val av måloperativsystem till Android.

3. Ange miljövariabeln JAVA_HOME. Verktyget Gradle som används för att skapa Android-appar kräver ett specifikt versionskrav för Java SDK. Om du vill hitta den version som stöds, gå till Inställningar>-Bygg, Utförande, Distribution>-Byggverktyg>-Gradle i Android Studio. Anteckna sökvägen som valts i rullgardinsmenyn Gradle JDK. Ange JAVA_HOME miljövariabeln till den här sökvägen med hjälp av följande steg:

   • I Windows-sökmenyn anger du: "Redigera systemmiljövariabler", då öppnas fönstret Systemegenskaper .
   • Välj Miljövariabler... och välj sedan Nytt... under Användarvariabler.
   • Ange variabelnamnet till JAVA_HOME och värdet till den sökväg som du hämtade från Android Studio.

4. Installera NodeJS för Windows Du kanske vill överväga att använda Node Version Manager (nvm) för Windows om du kommer att arbeta med flera projekt och en version av NodeJS. Vi rekommenderar att du installerar den senaste LTS-versionen för nya projekt.

Anmärkning

Du kan också överväga att installera och använda Windows-terminalen för att arbeta med önskat kommandoradsgränssnitt (CLI) samt Git för versionskontroll. Java JDK levereras paketerat med Android Studio v2.2+, men om du behöver uppdatera din JDK separat från Android Studio använder du Installationsprogrammet för Windows x64.

Skapa ett nytt projekt med React Native

1. Använd npx, paketkörverktyget som installeras med npm för att skapa ett nytt React Native-projekt. från Kommandotolken i Windows, PowerShell, Windows-terminaleneller den integrerade terminalen i VS Code (Visa > Integrerad Terminal).

   npx react-native init MyReactNativeApp
   

   Om du vill starta ett nytt projekt med en specifik React Native-version kan du använda argumentet --version. Information om versioner av React Native finns i versioner – React Native.

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

2. Öppna din nya "MyReactNativeApp"-katalog:

   cd MyReactNativeApp
   

3. Om du vill köra projektet på en Android-maskinvaruenhet ansluter du enheten till datorn med en USB-kabel.

4. Om du vill köra projektet på en Android-emulator bör du inte behöva vidta några åtgärder när Android Studio installeras med en standardemulator installerad. Om du vill köra appen på emulatorn för en viss enhet. Klicka på AVD Manager-knappen i verktygsfältet.

   .

5. Om du vill köra projektet anger du följande kommando. Då öppnas ett nytt konsolfönster med Node Metro Bundler.

   npx react-native run-android
   

   

   

   Anmärkning

   Om du använder en ny installation av Android Studio och ännu inte har gjort någon annan Android-utveckling kan du få fel på kommandoraden när du kör appen om att acceptera licenser för Android SDK. Till exempel "Varning: Licens för paketet Android SDK Platform 29 accepteras inte." Du kan lösa detta genom att klicka på knappen SDK Manager i Android Studio . Eller så kan du lista och acceptera licenserna med följande kommando och se till att använda sökvägen till SDK-platsen på datorn.

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

6. Om du vill ändra appen öppnar du projektkatalogen MyReactNativeApp i valfri IDE. Vi rekommenderar VS Code eller Android Studio.

7. Projektmallen som skapas av react-native init använder en huvudsida med namnet App.js. Den här sidan är förifylld med många användbara länkar till information om React Native-utveckling. Lägg till text i det första textelementet , till exempel strängen "HELLO WORLD!" som visas nedan.

   <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. Läs in appen igen för att visa de ändringar du har gjort. Det finns flera sätt att göra detta på.

   • I konsolfönstret Metro Bundler skriver du "r".
   • Dubbeltryck på "r" på tangentbordet i Android-enhetsemulatorn.
   • På en android-maskinvaruenhet skakar du enheten för att öppna react native-felsökningsmenyn och väljer "Läs in igen".