Kas jums jāzina, lai sāktu veidot mobilās lietotnes React Native

Nekas nav labāks par lietotņu veidošanu ar JavaScript. Ja vien jūs neveidojat mobilās lietotnes. JavaScript ir paredzēts tīmekļa lietotņu izveidei, un tā izmantošana vietējās mobilās lietotnes izveidošanai agrāk nebija iespējama. Nevienam tīmekļa izstrādātājam bija grūti ienirt vietējo mobilo lietotņu izveidē. Viņiem jāapgūst Java vai Objective-C ... vai jebkura programmēšanas valoda, kas tika izmantota šim nolūkam.

Tas ir, līdz Facebook React Native pārkāpa šo barjeru. React Native piedāvā lielas priekšrocības, piemēram, starpplatformu lietotņu izveidošana gan Android, gan IOS. Pirms React Native jums divreiz bija jāraksta kods - viens Android un viens IOS. Tā vairs nav.

Šis raksts ir ievads React Native pasaulē, tāpēc sagatavojieties?

Kāpēc jāreaģē uz vietējo?

Pareizi, kāpēc gan jāreaģē uz vietējo, nevis kādu citu tehnoloģiju?

Tas dod mums daudz risinājumu, ko citas tehnoloģijas nevar atļauties. Lūk, ko jūs varat darīt ar React Native:

Vietējo mobilo lietotņu veidošana

React Native ļauj mums rakstīt vietējās lietotnes JavaScript gan iOS, gan Android. Tas dod mums iespēju izmantot visus vietējos komponentus, piemēram, žestus, informatīvos paziņojumus, kameru un atrašanās vietu. Ir dažas citas JavaScript bibliotēkas tādu mobilo lietotņu izveidei kā ionic vai PhoneGap. Bet šīs bibliotēkas izmanto Webview, un lietotnes, kas izveidotas, izmantojot šīs tehnoloģijas, nav vietējas.

Starpplatformu mobilo lietotņu veidošana (iOS un Android)

Jā, ar React Native jūs varat izveidot mobilās lietotnes, kuras var darbināt iOS un Android. Tas ir viens no lieliskajiem React Native ieguvumiem. Pirms Facebook to izveidoja, jums bija jāveido sava lietotne divreiz un ar citu kodu: viens iOS, izmantojot Swift vai Objective-C, un viens Android, izmantojot Java vai Kotlin. React Native atrisināja šo problēmu, lai jūs varētu izveidot savu React Native lietotni, un tā darbosies iOS un Android. Satriecošs! ?

Uzrakstiet visu kodu JavaScript un React

Kamēr jūs veidojat React Native lietotnes, jūs faktiski rakstīsit JavaScript. Reactjs kods ļauj mums izveidot lieliskus lietotāja interfeisa un lietotāja pieredzes komponentus.

Darba sākšana ar reakcijas dzimteni

Sākot ar “native-native” var būt aizraujoši, bet tajā pašā laikā tas var būt mazliet mulsinošs. Pirmais solis ir tā instalēšana, un to var izdarīt vairākos veidos:

Izmantojot expo-cli:

expo-cli ir komandrindas rīks. Tas jums lejupielādē un instalē React Native katlu plāksni, kas integrēta ar expo API (instalēšanas rokasgrāmatu skatiet šeit). Tas ir vienkāršs veids, kā izveidot lietotni React Native, un tas ir ieteicamais veids, ja esat tikko sācis ar React Native.

expo-cli sniedz jums daudz iespēju. Jūs varat palaist un pārbaudīt savu lietojumprogrammu mobilajā ierīcē bez konfigurācijas. Skenējiet QR kodu, un jūsu lietotne tiks atvērta, izmantojot mobilo lietotni expo. Pārlūkprogrammā varat pārlūkot citas mobilās lietojumprogrammas, kas izveidotas, izmantojot React Native, izmantojot tīmekļa saskarni ar nosaukumu appertize!

Izmantojot reag-native-cli

Reaģēšanas-native-cli veic to pašu darbu kā expo-cli, bet ar atšķirīgu pieeju un papildu priekšrocībām. Lietotnes, kas instalētas kopā ar reag-native-cli, sniedz mums iespēju un iespēju mūsu lietotnē izveidot savus vietējos moduļus. Jums nav jāizstumj lietojumprogramma, lai varētu izveidot vietējos moduļus. Izstumšana ļauj izmantot vietējos moduļus un rakstīt jums piederošos elementus ( mēs izpētīsim, kā rakstīt vietējos moduļus citā daļā ).

React Native lietotņu izstrāde dažādās platformās ir atšķirīgs process. Dažreiz mums ir nepieciešama noteikta konfigurācija konkrētai platformai. Piemēram, lai izveidotu operētājsistēmai Android, jums jāizmanto Android SDK, tāpēc izpētīsim, kā tas darbojas!

Mobilo lietotņu veidošana Android ierīcēm

Lai sāktu izstrādāt Android, ir jāinstalē dažas prasības. Pirmkārt, jums ir jālejupielādē un jākonfigurē gan Android SDK, gan Android Studio. Tos var lejupielādēt ar šo saiti šeit.

Pēc Android Studio lejupielādes jāinstalē arī daži API. Lai to izdarītu, atveriet Android Studio, pēc tam noklikšķiniet uz cilnes Iestatījumi, tiks atvērts šis logs:

Vispirms cilnē SDK platformas pārbaudiet ✔️ platformu, kuru vēlaties, lai jūsu dzimtā puse atbalsta (piemēram, Android 6.0 Marshmallow). Pēc tam pārejiet uz SDK rīkiem.

Un pārbaudi Android SDK Build-Tools, Android SDK toolsun google play service. Sadaļā Android SDK Build-Tools atlasiet visas platformas:

  • Sākot no 19.0.0 līdz 20.0.0
  • No 22.0.0 līdz 24.0.0
  • Un 25.0.2, 26.0.1 līdz 26.0.3
  • 27.0.3 un 28.0.1 līdz 28.02

Tagad mēs esam paveikuši ar SDK un Android Studio. Nākamais solis ir emulators. Emulators (vai simulators) ir tas, kur mums ir jāpalaiž un jāpārbauda mūsu lietotne. Ir daudz dažādu izvēļu.

Varat izmantot Android Studio emulatorus. Šeit varat pārbaudīt, kā izveidot emulatoru lietošanai Android Studio. Godīgi sakot, es nekad tos neizmantoju. Es tā vietā dodu priekšroku Genymotion vai reālai ierīcei.

Genymotion

Genymotion ir darbvirsmas lietojumprogramma, kas nodrošina virtuālu emulatoru, lai pārbaudītu jūsu lietojumprogrammu. Man patīk to daudz izmantot, jo tas ir ātri. ? Tas dod jums iespēju izveidot pielāgotu tālruni ar funkcijām, kuras varat atrast jebkurā reālā ierīcē. Piemēram, iespējojiet Wifi, atrašanās vietu un kameru. Es ļoti iesaku jums izmantot Genymotion pār Android Studio emulatoriem vai jebkuru citu emulatoru.

Izmantojot reālas ierīces

Nekas nav labāks par lietojumprogrammas palaišanai un testēšanai izmantojot reālas ierīces. Tas ir tāpēc, ka tas ļauj jums zināt, kā jūsu lietojumprogramma izskatās reālā ierīcē. Tas liek jums sajust sava darba realitāti tādā veidā, kā virtuālā ierīce nedod. Tāpēc, ja jums ir iespēja izmantot ierīci, nevilcinieties.

Līdz šim brīdim mums ir labi ar Android - bet kā ar iOS?

Reaģējošo lietotņu veidošana IOS

React Native palaišana operētājsistēmai iOS neizskatās daudz atšķirīga no Android. Tā pati React Native lietotne, kas darbojas operētājsistēmā Android, var darboties arī iOS, izņemot dažus gadījumus.

Piemēram, ja vēlaties darboties iOS ierīcē, jums jābūt MacOS. Runājot par MacOS un iOS, jums nav jālejupielādē papildu atkarības, piemēram, Android SDK, lai palaistu React Native iOS.

Attiecībā uz emulatoriem Xcode ir jauki emulatori, kurus varat izmantot, lai pārbaudītu savu React Native lietotni. Jūs varat pārbaudīt šo ziņu, kurā parādīti daži triki, kurus izmantot kopā ar emulatoriem.

MacOS jūs varat palaist gan iOS, gan Android. MacOS noteikti varat instalēt Android Studio un Genymotion. Šī iespēja nepastāv datorā, kur var palaist tikai Android emulatoru, bet ne iOS emulatoru. Tātad jums ir paveicies? Ja jums ir MacOS - izbaudiet?

Tātad tagad mums ir vide, lai izveidotu lietotni React Native, un mēs esam visu instalējuši, bet kā tiek rakstīts React Native kods? Tas ir tik vienkārši: jūs faktiski rakstīsit Reactjs kodu.

Jūs varat pārbaudīt oficiālo ceļvedi, lai iegūtu praksi ar React Native. Iesaku šo lielisko rakstu sākt “React Native YouTube Replica”. Tas soli pa solim palīdzēs izveidot pirmo lietotni React Native.

Oho! Līdz šim jums viss ir kārtībā, un jūs kodējat ar reaģējošo. ? Bet jums jāpārbauda un atkļūdot kļūdas un redzēt koda žurnālus. Y eah baļķi !! Tāpēc mums ir nepieciešams d ebugger! Kā jūs atkļūdojat ar React Native?

Atkļūdošanas reakcijas dzimtā valoda

Koda atkļūdošana ir ļoti svarīga ne tikai ar React Native, bet arī ar jebkuru citu programmēšanas valodu. Tātad savā React Native kodā jums jāzina, kas notiek. Ir daudz dažādu veidu, kā atkļūdot lietotni React Native, piemēram:

Atkļūdot ar Chrome devtools

React Native dod iespēju izmantot Chrome devtools, lai skatītu savas lietotnes žurnālus. Lai atkļūdotu pārlūkā Chrome un iespējotu atkļūdošanas režīmu emulatorā, tastatūrā vienkārši noklikšķiniet uz Ctrl+ m.

Šis ekrāns tiks parādīts:

Un tad izvēlies Debug Js Remotely. Tādējādi pārlūkā Google Chrome tiks atvērta cilne ar šo adresi //localhost:8081/debugger-ui/. Tas ir paredzēts Chrome devtools lietošanai, kā ir ar citām iespējām?

Izmantojot React-native-debugger

React-native-debugger ir lielisks rīks React Native koda atkļūdošanai. Tā ir darbvirsmas lietojumprogramma, kas sniedz jums daudz priekšrocību. Tas nāk ar Redux devtools un React-devtools integrāciju. Jūs varat atkļūdot arī stilu. Tas faktiski ir labākais React Native atkļūdotājs, un to es izmantoju. Parasti tas ir pieejams MacOS, Windows un Linux. Apskatiet instalēšanas un integrācijas rokasgrāmatu.

Es domāju, ka šajā brīdī ir pietiekami. Šī ir pirmā daļa par absolūto ceļvedi mobilo lietotņu izveidošanai ar React Native. Nākamajā daļā mēs nonāksim pie vairākiem tehniskiem padomiem un jautājumiem, piemēram, kā mēs varam izmantot vietējos komponentus, React native API, integrāciju ar citām bibliotēkām, Redux, GraphQL un tamlīdzīgi. Tāpēc abonējiet šo e-pasta sarakstu, lai sekotu jaunumiem, kad iznāk nākamā daļa. Paldies par jūsu laiku. ?

Jūs vienmēr varat mani atrast čivināt?