Bedste fremgangsmåder til oprettelse af React Native apps - Del 1

Billede 1: Abstrakt billede med React-logo

Hvis du er ny i den React Native verden, er der nogle faldgruber, som du sandsynligvis vil undgå, mens du i nogle andre tilfælde bliver nødt til at træffe valg på forhånd måske uden at vide, hvor vigtige de er.

Nedenfor har jeg udarbejdet en liste over bedste praksis fra min personlige erfaring, som jeg håber, at du finder nyttige :-)

Brug kun Expo-Kit, hvis du ved nøjagtigt, hvad du laver

Expo er en gratis og open source værktøjskæde til React Native. Det er sandsynligvis det bedste kit derude til React Native-apps, men det kommer med begrænsninger.

Brug Expo:

  • Hvis du vil have en hurtig legeplads og ikke bygge din apps lager. Opret bare en ny app med hjælp til at oprette-reagere-native-app-pakken.
  • Hvis du har foretaget udvidet undersøgelse af appen, skal du bygge, og alle dens krav kan dækkes fra Expos tilbudte løsninger.
  • Hvis du ikke har en Mac-computer, og du absolut ønsker at bygge din app til iPhone også. Det er det eneste alternativ til at oprette eksekverbare IPA'er.

Brug ikke Expo:

  • Hvis du er ny med React Native, og du tror, ​​dette er den “must” vej at gå. Kontroller, om det opfylder dine behov først.
  • Hvis du planlægger at bruge RN-pakker fra tredjepart, der har tilpassede indbyggede moduler. Expo understøtter ikke denne funktionalitet, og i dette tilfælde bliver du nødt til at skubbe Expo-Kit ud. Efter min mening, hvis du vil skubbe et sæt ud, skal du ikke bruge det i første omgang. Det vil sandsynligvis gøre tingene sværere, end hvis du overhovedet ikke havde brugt kittet.

Generelt synes jeg Expo er et godt værktøj, og jeg bruger Expo Snack til at dele RN-kodestykker. Men lige nu kan det kun være til hjælp til opbygning af bestemte typer apps.

Sådan struktureres dine applikationsmapper / filer

Strukturering af din React Native-app er ikke anderledes end at strukturere din React-app. Så hvis du er bekendt med det, kan du holde dig til din eksisterende logik. Men hvis du ikke er det, vil du måske finde brugbar logik nedenfor:

Billede 2: Fil / mappestruktur til React Native app
  • Tilføj en mappe i roden kaldet “app”
  • Opret mapper inde i appen:

aktiver - Jeg bruger op til 3 mapper her: skrifttyper, ikoner og billeder

komponenter - Det er her du placerer alle dine delte React-komponenter. Normalt er disse komponenter dem, vi kalder "dummy", som ikke har nogen tilstandslogik og let kan genbruges på tværs af appen.

visninger - Dette er vores applikationsskærme, dem, som vi navigerer fra hinanden. Dette er også React-komponenter, men det er dem, vi kalder containere, fordi de indeholder deres egen tilstand.

moduler - Der er stykker, der ikke har nogen tilsvarende visningsdel (JSX). Typiske eksempler på dette er farvemodulet (indeholder alle appfarverne) og værktøjsmodulet (indeholder hjælpefunktioner, der genbruges).

tjenester - Dette er funktionerne, der omslutter API-opkaldene.

i18n - Dette er oversættelsestrengene for brugere af forskellige sprog og lokaliteter

Alle apps kræver en form for konfiguration, så jeg opretter normalt en fil kaldet config.js og sætter den derinde. Hvis konfigurationsfilen når mange linjer, kan vi derefter oprette en konfigurationsmappe og adskille konfigurationen i filer.

Hvis du har et bibliotek med statsledere, har du også brug for mapper til dens strukturer. I tilfælde af Redux bruges 2 flere mapper, en til handlinger og en anden til reduktionsmaskiner. Hvis du ikke bruger en ekstern pakke og foretrækker at bruge React's Context API, opretter du dine egne udbydere, der kan placeres enten i modulmappen eller i en ny mappe kaldet udbydere.

Vælg et navigationsbibliotek alt efter dine behov helt fra begyndelsen

Desværre har RN ikke leveret en solid løsning endnu eller endda en erstatning for gammel Navigator-komponent, så vi fokuserer nu på community-løsninger. Så hvis du er ved at starte et projekt, vil du vide, hvilket navigationsbibliotek du skal bruge, og om det vil være det rigtige for dig.

Generelt er der to typer navigationsbiblioteker. JavaScript-navigatorerne og de indfødte navigatorer. JavaScript-modulerne er skrevet i JavaScript, mens de indfødte er skrevet som indbyggede moduler på den respektive platform (Android, iOS) og overgået til JavaScript-moduler for at blive påkaldt i koden. De førstnævnte er meget lettere at konfigurere, mens sidstnævnte er meget mere performante. Brug tiden på at finde ud af, hvilken af ​​dem du har brug for, og vælg derefter en blandt de mange derude.

Spencer Carli har gjort et godt stykke arbejde med at uddybe de aktuelle navigationsvalg i React Native world i denne artikel, som jeg foreslår, at du læser. De dominerende muligheder er React Navigation som en JavaScript-løsning og React Native Navigation som en Native løsning.

Brug et CSS-in-JS-indpakningsbibliotek for nemheds skyld

I React Native er CSS skrevet i JavaScript. Det er noget, vi ikke har noget valg om. I stedet for at bruge StyleSheet.create metode og kode CSS som ren JavaScript, foretrækker jeg at bruge Styled Components-bibliotek. Stylede komponenter får skrivning af CSS til at føles intuitivt igen og får JSX til at se mere semantisk ud.

For nylig skrev jeg en artikel om, hvorfor jeg foretrækker at bruge Styled Components i React Native-apps, så du kan se der for at få flere oplysninger.

Bestem tidligt, hvordan du vil have din app til at "skalere" på tværs af forskellige enheder og skærmstørrelser

Chancerne er, at du udvikler en app til mere en enhedsstørrelse og skærmstørrelse. Nu her er der to muligheder for, hvordan man nærmer sig dit design / udvikling.

Du kan vælge at have forskellige UI / UX afhængigt af skærmstørrelsen. Dette er sandsynligvis den bedste mulighed for de fleste typer applikationer, men kræver en stor indsats, fordi der er flere skærme, der skal designes og implementeres. Skærmstørrelse kan identificeres via Dimensions API. Alternativt kan du bruge en tredjepartspakke, der indeholder nogle værktøjer ude af boksen, som f.eks. React Native Responsive UI.

Eller du kan vælge at have den samme UI / UX, der skalerer proportionalt for alle skærmstørrelser. Dette er den bedste mulighed, når du for eksempel udvikler et spil. Igen kan du bruge en tredjepartspakke til at opnå det, som f.eks. React Native Responsive Screen.

Ansvarsfraskrivelse: Jeg er producenten af ​​React Native Responsive Screen-pakken.

Gå til animationer med forsigtighed

Animationer er meget vigtige for mobile apps, men React Native's ydeevne er endnu ikke bedst.

For at beskytte jer mod at levere dårlige resultater skal du altid teste animationer i enheden - emulator giver ikke korrekt feedback. Du skal også gøre brug af den prop useNativeDriver (med værdien indstillet til sand), hvor du kan, fordi det vil hjælpe dig med at opnå bedre ydelse.

For flere tip til, hvordan man opnår bedre ydeevne, skal du kigge på denne tidligere artikel om mig.

Husk også ...

  1. React Native har ikke DOM-elementer. I stedet har vi at gøre med indfødte elementer.
  2. Om CSS:
  • Ikke alle egenskaber understøttes; i det mindste endnu ikke. Se dokumentationen for mere information: Se Style Props, Image Style Props, Text Style Props
  • Korthovedegenskaber fungerer ikke godt, så foretrækk altid altid de specifikke (dvs. margin-bund, margin-top, margin-left, margin-right i stedet for margin)
  • Ikke alle egenskaber understøtter procentvise værdier. For at nævne nogle få: margin, grænsebredde og grænseradius. Og hvis nogen forsøger at indstille en procentvis værdi, ignorerer RN enten den fuldstændigt, eller applikationen går ned.
  • RN giver flexstøtte ud af kassen. Lær det og brug, når du kan. Det er din bedste CSS-allierede!

Hvad synes du?

Hvad synes du om denne artikel? Hvilke andre bedste fremgangsmåder har du i tankerne? Giv dit perspektiv og ideer i kommentarfeltet nedenfor.

Hvis du nød denne artikel, er du velkommen til at trykke på klapknappen for at hjælpe andre med at finde den.

Om mig

Hej der, jeg er Tasos; en softwareingeniør, der elsker web og i øjeblikket arbejder meget med React Native og React. Jeg er medstifter af Coded Lines-softwareagentur, hvor vi gennemfører ende-til-ende mobil- og webprojekter med vægt på markedsføring i appen. Hvis det lyder, hvad du leder efter, så kontakt mig her: tasos.maroudas@codedlines.com. Tak for at komme forbi :)

___________________________________________________________________

Tak

George Karboulonis til korrekturlæsning