Labākā prakse vietņu lietotņu React izveidošanai - 1. daļa

1. attēls: abstrakts attēls ar React logotipu

Ja esat iesācējs React vietējā pasaulē, ir dažas nepilnības, no kurām jūs, iespējams, vēlaties izvairīties, savukārt dažos citos gadījumos jums būs jāizdara izvēle jau sākotnēji, pat nezinot, cik tie ir svarīgi.

Zemāk es esmu apkopojis labākās prakses sarakstu no savas personīgās pieredzes, un es ceru, ka jums tas noderēs :-)

Izmantojiet Expo-Kit tikai tad, ja precīzi zināt, ko darāt

Expo ir bezmaksas un atvērtā koda ķēde React Native. Tas, iespējams, ir labākais komplekts React Native lietotnēm, taču tam ir ierobežojumi.

Izmantot Expo:

  • Ja vēlaties ātru rotaļu laukumu un nevis veidojat savas lietotnes krātuvi. Vienkārši izveidojiet jaunu lietotni, izmantojot palīgu izveide-reaģēt-vietne-lietotne.
  • Ja esat veikuši izvērstu izpēti par to, kuru lietotni plānojat izveidot, un visas tās prasības var segt no Expo piedāvātajiem risinājumiem.
  • Ja jums nav Mac datora un jūs noteikti vēlaties izveidot savu lietotni arī iPhone. Tā ir vienīgā alternatīva izpildāmu IPA veidošanai.

Nelietojiet Expo:

  • Ja esat iesācējs React Native, un jūs domājat, ka tas ir “obligātais” ceļš ejams. Vispirms pārbaudiet, vai tas atbilst jūsu vajadzībām.
  • Ja plānojat izmantot trešo personu RN pakotnes, kurām ir pielāgoti vietējie moduļi. Expo neatbalsta šo funkcionalitāti, un tādā gadījumā jums būs jāizņem Expo-Kit. Manuprāt, ja jūs gatavojaties izgrūst jebkuru komplektu, nelietojiet to vispirms. Tas, iespējams, padarīs lietas grūtākas nekā tad, ja jūs vispār nebūtu izmantojis komplektu.

Kopumā es domāju, ka Expo ir lielisks rīks, un es izmantoju Expo Snack, lai dalītos ar RN koda fragmentiem. Bet šobrīd tas var būt noderīgs tikai noteikta veida lietotņu izveidošanai.

Kā izveidot lietojumprogrammu mapes / failus

Lietotnes React Native strukturēšana neatšķiras no lietotnes React strukturēšanas. Tātad, ja jūs to zināt, varat pieturēties pie savas esošās loģikas. Bet, ja jūs neesat, varbūt jums noderēs zemāk piedāvātā loģika:

2. attēls. Lietotnes React Native faila / mapes struktūra
  • Pievienojiet mapē sakni ar nosaukumu “app”
  • Izveidojiet mapes lietotnē:

aktīvi - šeit es izmantoju ne vairāk kā 3 mapes: fontus, ikonas un attēlus

komponenti - šajā vietā jūs novietosit visus savus kopīgos React komponentus. Parasti šie komponenti ir tie, kurus mēs saucam par “fiktīviem”, kuriem nav stāvokļa loģikas un kurus var viegli izmantot atkārtoti visā lietotnē.

skati - šie ir mūsu lietojumprogrammu ekrāni, starp kuriem mēs pārvietojamies. Tie ir arī React komponenti, taču tos saucam par konteineriem, jo ​​tiem ir savs stāvoklis.

moduļi - ir gabali, kuriem nav atbilstošas ​​skata daļas (JSX). Tipiski to piemēri ir krāsu modulis (satur visas lietotnes krāsas) un utilītu modulis (satur utilītu funkcijas, kuras tiek izmantotas atkārtoti).

pakalpojumi - šīs ir funkcijas, kas ietina API zvanus.

i18n - šīs ir tulkošanas virknes dažādu valodu un lokalizācijas lietotājiem

Visām lietotnēm ir nepieciešama noteikta veida konfigurācija, tāpēc parasti izveidoju failu ar nosaukumu config.js un ievietoju to tur. Ja konfigurācijas fails sasniedz daudz rindu, mēs pēc tam varam izveidot konfigurācijas mapi un atdalīt konfigurāciju failos.

Ja jums ir štata pārvaldnieka bibliotēka, jums būs vajadzīgas arī tās mapes. Redux gadījumā tiek izmantotas vēl 2 mapes, vienu darbībām un otru reduktoriem. Ja jūs neizmantojat ārēju paketi un vēlaties izmantot React Context API, jūs izveidosit savus pakalpojumu sniedzējus, kurus var ievietot moduļu mapē vai jaunā mapē, ko sauc par pakalpojumu sniedzējiem.

Izvēlieties navigācijas bibliotēku atbilstoši savām vajadzībām jau pašā sākumā

Diemžēl RN vēl nav nodrošinājis stabilu risinājumu vai pat vecā Navigator komponenta nomaiņu, tāpēc tagad mēs koncentrējamies uz kopienas risinājumiem. Tātad, ja jūs gatavojaties sākt projektu, vēlaties zināt, kuru navigācijas bibliotēku izmantot, un vai tā jums būs piemērota.

Kopumā ir divu veidu navigācijas bibliotēkas. JavaScript un vietējie navigatori. JavaScript moduļi ir rakstīti JavaScript, savukārt vietējie moduļi tiek rakstīti kā attiecīgās platformas (Android, iOS) vietējie moduļi un savienoti ar JavaScript moduļiem, lai tos izmantotu kodā. Pirmos ir daudz vieglāk iestatīt, savukārt pēdējos ir daudz izpildītāk. Pavadiet laiku, lai izdomātu, kurš no tiem jums ir nepieciešams, un pēc tam izvēlieties vienu no daudzajiem, kas tur atrodas.

Spensers Karli ir paveicis lielisku darbu, izstrādājot pašreizējās navigācijas izvēles React Native pasaulē šajā rakstā, kuru es iesaku jums izlasīt. Dominējošās iespējas tomēr ir React navigācija kā JavaScript risinājums un React navigācija kā vietējais risinājums.

Ērtības labad izmantojiet CSS-in-JS iesaiņojuma bibliotēku

React Native CSS ir rakstīts JavaScript. Tas ir kaut kas tāds, par kuru mums nav izvēles. Personīgi tā vietā, lai izmantotu StyleSheet.create metodi un CSS kā tīru JavaScript, es labprātāk lietoju bibliotēku Styled Components. Izveidotie komponenti padara CSS rakstīšanu atkal intuitīvu un padara JSX semantiskāku.

Nesen es rakstīju rakstu par to, kāpēc es labāk izmantoju veidotus komponentus React Native lietotnēs, lai jūs tur varētu apskatīt sīkāku informāciju.

Jau savlaicīgi izlemiet, kā vēlaties, lai jūsu lietotne tiktu “mērogojama” dažādās ierīcēs un ekrāna izmēros

Iespējams, ka jūs izstrādājat lietotni vairāk nekā vienas ierīces un ekrāna lielumam. Tagad šeit ir divas iespējas, kā vērsties pret savu dizainu / attīstību.

Atkarībā no ekrāna lieluma varat izvēlēties atšķirīgu UI / UX. Tas, iespējams, ir labākais risinājums lielākajai daļai lietojumprogrammu veidu, taču tas prasa daudz pūļu, jo ir jāizstrādā un jāievieš vairāki ekrāni. Ekrānu lielumu var noteikt, izmantojot kategoriju API. Alternatīvi varat izmantot trešās puses paketi, kas nodrošina dažus utilītus, piemēram, React Native Responsive UI.

Vai arī jūs varat izvēlēties to pašu UI / UX, kura mērogs tiek proporcionāli piemērots visiem ekrāna izmēriem. Tas ir labākais risinājums, ja, piemēram, izstrādājat spēli. Atkal jūs varat izmantot trešo personu paketi, lai to sasniegtu, piemēram, React Native Responsive Screen.

Atsaukums: Es esmu React Native Responsive Screen paketes veidotājs.

Pieejiet animācijām piesardzīgi

Animācijas ir ļoti svarīgas mobilajām lietotnēm, taču React Native veiktspēja vēl nav tā labākā.

Lai pasargātu sevi no sliktu rezultātu sniegšanas, vienmēr jātestē animācijas ierīcē - emulators nesniedz pienācīgu atgriezenisko saiti. Jums arī visur, kur varat, ir jāizmanto rekvizīts useNativeDriver (ar vērtību, kas iestatīta uz patiesu), jo tas palīdzēs sasniegt labāku sniegumu.

Lai iegūtu vairāk padomu, kā sasniegt labāku sniegumu, ieskatieties šajā iepriekšējā rakstā.

Paturiet prātā arī…

  1. React Native nav DOM elementu. Tā vietā mums ir darīšana ar vietējiem elementiem.
  2. Par CSS:
  • Ne visi rekvizīti tiek atbalstīti; vismaz vēl ne. Papildinformāciju skatiet dokumentācijā: Skatīt stila rekvizītus, Attēlu stila rekvizītus, Teksta stila rekvizītus
  • Saīsinātie rekvizīti nedarbojas labi, tāpēc vienmēr dodiet priekšroku specifiskajiem (t.i., robežas-apakšas, augšējās malas, kreisās malas, labās malas, nevis robežas)
  • Ne visi rekvizīti atbalsta procentuālās vērtības. Jāmin daži: robeža, robežas platums un robežas rādiuss. Un, ja kāds mēģina iestatīt procentuālo vērtību, RN to pilnībā ignorēs, vai arī lietojumprogramma sabruks.
  • RN nodrošina elastīgu atbalstu ārpus kastes. Uzziniet to un izmantojiet, kad vien varat. Tas ir jūsu labākais CSS sabiedrotais!

Ko tu domā?

Ko jūs domājat par šo rakstu? Kāda vēl labākā prakse jums ir prātā? Piedāvājiet savu viedokli un idejas komentāru sadaļā zemāk.

Ja jums patika šis raksts, nekautrējieties nospiest šo klabināšanas pogu , lai palīdzētu citiem to atrast.

Par mani

Sveiki, es esmu Tasos; programmatūras inženieris, kurš mīl tīmekli un šobrīd daudz strādā ar React Native un React. Es esmu programmatūras aģentūras Coded Lines līdzdibinātājs, kurā mēs veicam visaptverošus mobilos un tīmekļa projektus ar uzsvaru uz mārketingu lietotnē. Ja izklausās, ko meklējat, lūdzu, sazinieties ar mani šeit: tasos.maroudas@codedlines.com. Paldies, ka apstājāties :)

___________________________________________________________________

Paldies

Džordžs Karboulonis par korektūru