Mida peate teadma, et hakata React Native'is mobiilirakendusi ehitama

Miski pole parem kui JavaScripti abil rakenduste loomine. Kui te ei loo mobiilirakendusi. JavaScripti eesmärk on veebirakenduste loomine ja selle kasutamine natiivse mobiilirakenduse loomiseks ei olnud varem võimalik. Igal veebiarendajal oli raske sukelduda natiivsete mobiilirakenduste loomisse. Nad peavad õppima Java või Objective-C ... või mis tahes programmeerimiskeelt, mida selleks otstarbeks kasutati.

See tähendab, kuni Facebooki React Native selle barjääri murdis. React Native'il on suured eelised, nagu platvormidevaheliste rakenduste loomine nii Androidile kui ka IOS-ile. Enne React Native'i pidite oma koodi kirjutama kaks korda - üks Androidi ja teine ​​IOS-i jaoks. See pole enam nii.

See artikkel on sissejuhatus React Native'i maailma, nii et olge valmis?

Miks reageerida kohalikule?

Õige, miks siis reageerida kohalikule ja mitte mingile muule tehnoloogiale?

See annab meile palju lahendusi, mida muud tehnoloogiad endale lubada ei saa. React Native'i abil saate teha järgmist.

Natiivsete mobiilirakenduste loomine

Reageeri Native võimaldab meil kirjutada JavaScripti omarakendusi nii iOS-i kui ka Androidi jaoks. See annab meile võimaluse kasutada kõiki kohalikke komponente, nagu žestid, tõukemärguanded, kaamera ja asukoht. Mobiilirakenduste loomiseks on veel mõned JavaScripti teegid, näiteks ionic või PhoneGap. Kuid need teegid kasutavad veebivaadet ja nende tehnoloogiatega loodud rakendused pole kohalikud.

Platvormidevaheliste mobiilirakenduste loomine (iOS ja Android)

Jah, React Native abil saate ehitada mobiilirakendusi, mis töötavad iOS-is ja Androidis. See on üks React Native'i suurtest eelistest. Enne kui Facebook selle lõi, pidite oma rakenduse ehitama kaks korda ja erineva koodiga: üks iOS-ile, kasutades Swifti või Objective-C, ja teine ​​Androidile, kasutades Java-d või Kotlini. React Native lahendas selle probleemi, nii et saate oma React Native'i rakenduse üles ehitada ja see töötab iOS-is ja Androidis. Vinge! ?

Kirjutage oma kood kõik JavaScripti ja React

React Native rakenduste loomise ajal kirjutate tegelikult JavaScripti. Reactjs kood võimaldab meil luua suurepäraseid kasutajaliidese ja kasutajakogemuse komponente.

Alustamine reaktiiv-emakeelega

Alustamine reaktsioonist native võib olla põnev, kuid samas võib see olla natuke segane. Esimene samm on selle installimine ja seda saab teha mitmel viisil:

Expo-cli kasutamine:

expo-cli on käsurea tööriist. See laadib alla ja installib teie jaoks React Native boilerplate, integreeritud expo API-ga (installijuhendi leiate siit). See on lihtne viis React Native rakenduse loomiseks ja see on soovitatav viis, kui olete just React Native'iga alustanud.

expo-cli annab teile palju võimalusi. Rakendust saate käivitada ja testida mobiilseadmes ilma seadistusteta. Skannige QR-kood ja teie rakendus avaneb expo mobiilirakendusega. Veebiliidese nimega appertize saate uurida brauseris muid React Native'iga loodud mobiilirakendusi!

Kasutades reageerima-native-cli

Reaktiiv-native-cli teeb sama tööd nagu expo-cli, kuid erineva lähenemisviisi ja täiendavate eelistega. Reaktsioon-native-cli-ga installitud rakendused pakuvad meile võimalust ja võime luua oma rakenduses oma kohalikke mooduleid. Natiivmoodulite loomiseks ei pea te oma rakendust välja jätma. Väljaviskamine võimaldab teil kasutada natiivmooduleid ja kirjutada endale ( uurime, kuidas natiivmooduleid kirjutada teises osas ).

React Native rakenduste arendamine erinevatel platvormidel on erinev protsess. Mõnikord vajame konkreetse platvormi jaoks mõnda konkreetset konfiguratsiooni. Näiteks Androidi jaoks ehitamiseks peate kasutama Android SDK-d, nii et uurime, kuidas see töötab!

Androidi mobiilirakenduste loomine

Androidi arendamise alustamiseks peate installima mõned nõuded. Esiteks peate alla laadima ja konfigureerima nii Android SDK kui ka Android Studio. Selle lingi abil saate need alla laadida siit.

Pärast Android Studio allalaadimist peate installima ka mõned API-d. Selleks avage Android Studio ja seejärel klõpsake vahekaarti Seaded. See aken avaneb:

Esmalt kontrollige vahekaardil SDK Platvormid ✔️platvormi, mida soovite, et teie kodune reageeriv inimene toetaks (näiteks Android 6.0 Marshmallow). Seejärel lülituge SDK tööriistadele.

Ja kontrolli Android SDK Build-Tools, Android SDK toolsja google play service. Jaotises Android SDK Build-Tools valige kõik platvormid:

  • Alates 19.0.0 kuni 20.0.0
  • Alates 22.0.0 kuni 24.0.0
  • Ja 25.0.2, 26.0.1 kuni 26.0.3
  • 27.0.3 ja 28.0.1 kuni 28.02

Nüüd on SDK ja Android Studio tehtud. Järgmine samm on emulaator. Emulaator (või simulaator) on koht, kus peame jooksma ja oma rakendust testima. Valikuid on palju erinevaid.

Võite kasutada Android Studio emulaatoreid. Siit saate vaadata, kuidas luua emulaator Android Studios kasutamiseks. Ausalt öeldes pole ma neid kunagi kasutanud. Eelistan hoopis Genymotioni või päris seadet.

Genymotion

Genymotion on töölauarakendus, mis pakub teie rakenduse testimiseks virtuaalset emulaatorit. Mulle meeldib seda palju kasutada, sest see on kiire. ? See annab teile võimaluse luua kohandatud telefon funktsioonidega, mille leiate igast reaalsest seadmest. Näiteks lubage Wifi, asukoht ja kaamera. Soovitan teil tungivalt kasutada Genymotioni üle Android Studio emulaatorite või mõne muu emulaatori.

Reaalsete seadmete kasutamine

Miski pole parem, kui rakenduse käitamiseks ja testimiseks kasutatakse tõelisi seadmeid. Seda seetõttu, et see annab teile teada, kuidas teie rakendus reaalses seadmes välja näeb. See paneb sind tundma oma töö tegelikkust viisil, mida virtuaalne seade ei anna. Nii et kui teil on seadme kasutamise võimalus, ärge kartke.

Siiani oleme Androidiga kõik korras - aga kuidas on lood iOSiga?

Reageerivate rakenduste loomine IOS-i jaoks

React Native'i käitamine iOS-i jaoks ei tundu palju erinev Androidist. Sama React Native rakendus, mis töötab Androidis, võib mõningate eranditega töötada ka iOS-is.

Näiteks kui soovite töötada iOS-i seadmes, peab teil olema MacOS. MacOSist ja iOS-ist rääkides ei pea React Native'i käitamiseks iOS-is alla laadima täiendavaid sõltuvusi, nagu näiteks Androidi SDK.

Emulaatorite osas on Xcode'il toredad emulaatorid, mille abil saate oma rakendust React Native testida. Saate vaadata seda postitust, mis näitab mõningaid trikke, mida emulaatoritega kasutada.

MacOS-is saate käivitada nii iOS-i kui ka Android-i. Kindlasti saate MacOS-i installida Android Studio ja Genymotion. Seda võimalust pole arvutis, kus saate käitada ainult Android-emulaatorit, kuid mitte iOS-i emulaatorit. Nii et teil on õnne? Kui teil on MacOS - naudi?

Nii et nüüd on meil olemas rakendus React Native ülesehitamiseks ja oleme kõik installinud, aga kuidas React Native kood kirjutatakse? See on nii lihtne: tegelikult kirjutate Reactjs-koodi.

React Native'iga harjutamiseks saate vaadata ametlikku juhendit. Soovitan seda suurepärast artiklit käivitada „Reageeri Native YouTube'i koopia.” See juhendab teid samm-sammult oma esimese React Native'i rakenduse loomiseks.

Vau! Siiani on sul kõik korras ja kodeerid reaktiiv-native-ga. ? Kuid peate oma vead kontrollima ja siluma ning nägema oma koodi logisid. Y EAH palgid !! Nii et me vajame d ebuggerit! Kuidas saate React Native'iga siluda?

Reageerimise loomulik silumine

Koodi silumine on väga oluline mitte ainult React Native, vaid ka mõne muu programmeerimiskeelega. Nii et oma React Native koodis peate teadma, mis toimub. Reageerige oma rakenduse silumiseks mitmel viisil:

Siluge Chrome'i devtoolidega

Reageeri Native annab teile võimaluse kasutada oma rakenduse logide kuvamiseks Chrome'i devtoole. Chrome'i silumiseks ja silumisrežiimi lubamiseks emulaatoris klõpsake lihtsalt klaviatuuril Ctrl+ m.

See ekraan avaneb:

Ja siis vali Debug Js Remotely. See avab Google Chrome'is selle aadressiga vahelehe //localhost:8081/debugger-ui/. See on Chrome'i devtoolide kasutamiseks, kuidas on lood muude võimalustega?

React-native-siluri kasutamine

React-native-debugger on suurepärane tööriist React Native koodi silumiseks. See on töölauarakendus, mis annab teile palju eeliseid. See on varustatud Reduxi devtoolide ja React-devtoolsi integreerimisega. Saate ka stiili siluda. See on tegelikult React Native'i parim silur ja seda ma kasutan. Tavaliselt on see saadaval MacOS-is, Windowsis ja Linuxis. Vaadake installi- ja integreerimisjuhendit.

Ma arvan, et sellel hetkel piisab. See on React Native'iga mobiilirakenduste loomise absoluutse juhendi esimene osa. Järgmises osas uurime rohkem tehnilisi näpunäiteid ja küsimusi, nagu saame kasutada natiivseid komponente, React native API-d, integreerimist teiste raamatukogudega, Reduxi, GraphQL-i ja muud sellist. Nii et tellige see meililoend, et olla kursis järgmise osa ilmumisega. Täname teid teie aja eest. ?

Kas leiate mind alati Twitterist?