Bevezetés androidos fejlesztésbe a React Native használatával

Ez az útmutató segítséget nyújt a React Native windowsos használatának megkezdéséhez egy platformfüggetlen alkalmazás létrehozásához, amely androidos eszközökön fog működni.

Áttekintés

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 Native használatának első lépései a szükséges eszközök telepítésével

1. Telepítse a Visual Studio Code-ot (vagy a választott kódszerkesztőt).

2. Telepítse az Android Studio for Windowst, és állítsa be a ANDROID_HOME környezeti változót. Kövesse a Környezet beállítása – React Native című témakör utasításait. Ügyeljen arra, hogy a fejlesztői operációs rendszer kiválasztása "Windows" értékre, a cél operációs rendszer pedig Androidra legyen állítva.

3. Állítsa be a JAVA_HOME környezeti változót. Az Android-alkalmazások készítéséhez használt Gradle-eszköznek a Java SDK-hoz meghatározott verziókövetelményre van szüksége. A támogatott verzió megkereséséhez az Android Studióban lépjen a Beállítások->Build, Végrehajtás, Telepítés->Felkészítési eszközök->Gradle menübe. Írja le a Gradle JDK legördülő listában kijelölt útvonalat. Állítsa a JAVA_HOME környezeti változót erre az útvonalra az alábbi lépésekkel:

   • A Windows keresési menüjében adja meg a következőt: "A rendszerkörnyezet változóinak szerkesztése". Ekkor megnyílik a Rendszer tulajdonságai ablak.
   • Válassza a Környezeti változók... lehetőséget, majd kattintson az Új... lehetőségre a Felhasználói változókrésznél.
   • Állítsa be a változó nevét JAVA_HOME és az Android Studióból lekért elérési út értékét.

4. NodeJS telepítése Windowsra Érdemes megfontolnod a Node Version Manager (nvm) használatát Windowsra, ha több projekttel és NodeJS verzióval fogsz dolgozni. Javasoljuk, hogy az új projektekhez telepítse a legújabb LTS-verziót.

Megjegyzés:

Érdemes lehet a Windows Terminál telepítését és használatát is megfontolni az előnyben részesített parancssori felület (CLI) használatához, valamint Git verziókövetési. A Java JDK az Android Studio 2.2+-os verziójával van csomagolva, de ha a JDK-t külön kell frissítenie az Android Studiótól, használja a Windows x64 Installert.

Új projekt létrehozása a React Native használatával

1. Új React Natív projekt létrehozásához használja az npx-et, az npm-szel telepített csomagfuttató eszközt. a Windows parancssorából, a PowerShellből, a Windows Terminálvagy a VS Code integrált termináljából (> integrált terminál megtekintése).

   npx react-native init MyReactNativeApp
   

   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
   

2. Nyissa meg az új "MyReactNativeApp" könyvtárat:

   cd MyReactNativeApp
   

3. Ha hardveres Android-eszközön szeretné futtatni a projektet, csatlakoztassa az eszközt a számítógéphez USB-kábellel.

4. Ha androidos emulátoron szeretné futtatni a projektet, nem kell semmilyen műveletet elvégeznie, mivel az Android Studio telepíti az alapértelmezett emulátort. Ha egy adott eszköz emulátorán szeretné futtatni az alkalmazást. Kattintson az eszköztárban található AVD Manager gombjára.

   .

5. A projekt futtatásához írja be a következő parancsot. Ekkor megnyílik egy új konzolablak, amelyen a Node Metro Bundler látható.

   npx react-native run-android
   

   

   

   Megjegyzés:

   Ha az Android Studio új telepítését használja, és még nem végzett semmilyen más Android-fejlesztést, hibaüzenetek jelenhetnek meg a parancssorban, amikor futtatja az alkalmazást az Android SDK licenceinek elfogadásával kapcsolatban. Például: "Figyelmeztetés: Az Android SDK Platform 29 csomag licence nem fogadható el." A probléma megoldásához kattintson az SDK Manager gombra az Android Studio . A licenceket az alábbi paranccsal is listázhatja és elfogadhatja, ügyelve arra, hogy a gépén található SDK-helyre mutató elérési utat használja.

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

6. Az alkalmazás módosításához nyissa meg a MyReactNativeApp projektkönyvtárat a választott IDE-ben. A VS Code vagy az Android Studio használatát javasoljuk.

7. A react-native init által létrehozott projektsablon egy App.js nevű főoldalt használ. Ez a lap sok hasznos hivatkozással rendelkezik, amelyek a React natív fejlesztésével kapcsolatos információkra mutatnak. Adjon hozzá néhány szöveget az első Szöveg elemhez, például az alább látható "HELLO WORLD!" karakterláncot.

   <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. Töltse be újra az alkalmazást a végrehajtott módosítások megjelenítéséhez. Ezt többféleképpen is megteheti.

   • A Metro Bundler konzolablakában írja be az "r" szöveget.
   • Az Android-eszközemulátorban koppintson duplán az "r" ikonra a billentyűzeten.
   • Egy hardveres androidos eszközön rázza meg az eszközt a React natív hibakeresési menüjének megjelenítéséhez, és válassza az "Újratöltés" lehetőséget.