Best practices voor het maken van React Native-apps - Deel 1

Afbeelding 1: Abstract beeld met React-logo

Als je nieuw bent in de React Native-wereld, zijn er enkele valkuilen die je waarschijnlijk wilt vermijden, terwijl je in sommige andere gevallen van tevoren keuzes moet maken zonder te weten hoe belangrijk ze zijn.

Hieronder heb ik een lijst met best practices samengesteld uit mijn persoonlijke ervaring, waarvan ik hoop dat je ze nuttig zult vinden :-)

Gebruik Expo-Kit alleen als u precies weet wat u doet

Expo is een gratis en open source tool-chain voor React Native. Het is waarschijnlijk de beste kit die er is voor React Native-apps, maar het heeft beperkingen.

Gebruik Expo:

  • Als u een snelle speeltuin wilt en niet de repository van uw app wilt bouwen. Maak gewoon een nieuwe app met het pakket help create-react-native-app.
  • Als je uitgebreid onderzoek hebt gedaan naar de app die je gaat bouwen en alle vereisten kunnen worden gedekt door de aangeboden oplossingen van Expo.
  • Als je geen Mac-computer hebt en je absoluut ook je app voor iPhone wilt bouwen. Het is het enige alternatief voor het bouwen van uitvoerbare IPA's.

Gebruik geen Expo:

  • Als React Native nieuw voor je is en je denkt dat dit de "must" -weg is. Controleer eerst of het aan uw behoeften voldoet.
  • Als u van plan bent om RN-pakketten van derden te gebruiken die aangepaste native modules hebben. Expo ondersteunt deze functionaliteit niet en in dat geval moet u Expo-Kit uitwerpen. Naar mijn mening, als je een kit gaat uitwerpen, gebruik hem dan niet in de eerste plaats. Het zal de dingen waarschijnlijk moeilijker maken dan wanneer je de kit helemaal niet had gebruikt.

Over het algemeen vind ik Expo een geweldig hulpmiddel, en ik gebruik Expo Snack om RN-codefragmenten te delen. Maar nu kan het alleen helpen bij het bouwen van bepaalde soorten apps.

Hoe u uw applicatiemappen / -bestanden structureert

Uw React-app structureren is niet anders dan uw React-app structureren. Dus als je daar bekend mee bent, kun je je bestaande logica behouden. Maar als u dat niet bent, zult u misschien de onderstaande logica nuttig vinden:

Afbeelding 2: Bestands- / mapstructuur voor React Native app
  • Voeg een map toe in de root genaamd "app"
  • Maak mappen in de app:

activa - ik gebruik hier maximaal 3 mappen: lettertypen, pictogrammen en afbeeldingen

componenten - Hier plaatst u al uw gedeelde React-componenten. Meestal zijn dit componenten die we 'dummy' noemen, die geen toestandslogica hebben en gemakkelijk in de app kunnen worden hergebruikt.

weergaven - Dit zijn onze toepassingsschermen, die we van de ene naar de andere navigeren. Dit zijn ook React-componenten, maar dit zijn degenen die we containers noemen, omdat ze hun eigen status bevatten.

modules - Er zijn stukken die geen overeenkomstig view-onderdeel (JSX) hebben. Typische voorbeelden hiervan zijn de kleurenmodule (bevat alle app-kleuren) en de utils-module (bevat hulpprogramma's die opnieuw worden gebruikt).

services - Dit zijn de functies die de API-aanroepen afwikkelen.

i18n - Dit zijn de vertaalreeksen voor gebruikers van verschillende talen en landinstellingen

Alle apps vereisen een soort configuratie, dus maak ik meestal een bestand met de naam config.js en plaats ik dit daar. Als het configuratiebestand veel regels bereikt, kunnen we vervolgens een configuratiemap maken en de configuratie in bestanden scheiden.

Als je een bibliotheek van de staatsmanager hebt, heb je ook mappen nodig voor de structuren. In het geval van Redux worden nog 2 mappen gebruikt, een voor acties en een andere voor verloopstukken. Als u geen extern pakket gebruikt en liever de Context API van React gebruikt, maakt u uw eigen providers, die in de modulemap of in een nieuwe map met de naam providers kunnen worden geplaatst.

Kies vanaf het begin een navigatiebibliotheek volgens uw behoeften

Helaas heeft RN nog geen solide oplossing of zelfs een vervanging voor oude Navigator-componenten geleverd, dus richten we ons nu op community-oplossingen. Dus als u op het punt staat een project te starten, wilt u weten welke navigatiebibliotheek u moet gebruiken en of deze de juiste is voor u.

Over het algemeen zijn er twee soorten navigatiebibliotheken. De JavaScript-navigators en de native navigators. De JavaScript-bestanden zijn geschreven in JavaScript, terwijl de native zijn geschreven als native modules van het respectieve platform (Android, iOS) en overbrugd naar JavaScript-modules om in de code te worden opgeroepen. De eerste zijn veel eenvoudiger in te stellen, terwijl de laatste veel performanter zijn. Besteed de tijd om erachter te komen welke je nodig hebt en kies vervolgens een van de vele die er zijn.

Spencer Carli heeft geweldig werk verricht door de huidige navigatiekeuzes in React Native World verder uit te werken in dit artikel, dat ik u aanraad om te lezen. De dominante opties zijn echter React Navigation als een JavaScript-oplossing en React Native Navigation als een native oplossing.

Gebruik voor het gemak een CSS-in-JS wrapper-bibliotheek

In React Native is CSS geschreven in JavaScript. Daar hebben we geen keus in. Persoonlijk in plaats van de StyleSheet.create-methode en de CSS-code als pure JavaScript te gebruiken, gebruik ik liever de Styled Components-bibliotheek. Dankzij gestileerde componenten voelt het schrijven van CSS weer intuïtief en ziet de JSX er semantischer uit.

Onlangs schreef ik een artikel over waarom ik liever Styled Components gebruik in React Native-apps, zodat je daar een kijkje kunt nemen voor meer informatie.

Bepaal vroeg hoe je je app op verschillende apparaten en schermformaten wilt 'schalen'

De kans is groot dat u een app ontwikkelt voor meer dan één apparaatgrootte en schermgrootte. Nu zijn er twee opties voor het benaderen van uw ontwerp / ontwikkeling.

U kunt ervoor kiezen om verschillende UI / UX te hebben, afhankelijk van de schermgrootte. Dit is waarschijnlijk de beste optie voor de meeste soorten toepassingen, maar vergt veel inspanning omdat er meerdere schermen moeten worden ontworpen en geïmplementeerd. De grootte van schermen kan worden geïdentificeerd via de Dimensions API. U kunt ook een pakket van derden gebruiken dat standaard enkele hulpprogramma's biedt, zoals React Native Responsive UI.

Of u kunt ervoor kiezen om dezelfde UI / UX te hebben die proportioneel wordt geschaald voor alle schermformaten. Dit is de beste optie wanneer u bijvoorbeeld een game ontwikkelt. Nogmaals, u kunt een pakket van derden gebruiken om dat te bereiken, zoals React Native Responsive Screen.

Disclaimer: ik ben de maker van het React Native Responsive Screen-pakket.

Benader animaties voorzichtig

Animaties zijn erg belangrijk voor mobiele apps, maar de prestaties van React Native zijn nog niet op zijn best.

Om jezelf te beschermen tegen het leveren van slechte resultaten, moet je altijd animaties in het apparaat testen - emulator geeft geen goede feedback. U moet ook waar mogelijk gebruik maken van de prop useNativeDriver (met waarde ingesteld op true), omdat deze u zal helpen betere prestaties te behalen.

Voor meer tips over hoe je betere prestaties kunt bereiken, bekijk je dit vorige artikel van mij.

Houd ook rekening met ...

  1. React Native heeft geen DOM-elementen. In plaats daarvan hebben we te maken met native elementen.
  2. Over CSS:
  • Niet alle eigenschappen worden ondersteund; tenminste nog niet. Raadpleeg de documentatie voor meer info: Props van stijl bekijken, Props van beeldstijl, Props van tekststijl
  • Steno-eigenschappen werken niet goed, dus geef altijd de voorkeur aan de specifieke (d.w.z. marge-onder, marge-boven, marge-links, marge-rechts in plaats van marge)
  • Niet alle eigenschappen ondersteunen percentagewaarden. Om er enkele te noemen: marge, randbreedte en randradius. En als iemand probeert een percentagewaarde in te stellen, negeert RN deze volledig of crasht de toepassing.
  • RN biedt out-of-the-box flexibele ondersteuning. Leer het en gebruik het wanneer je maar kunt. Het is je beste CSS-bondgenoot!

Wat denk je?

Wat vindt u van dit artikel? Welke andere best practices heb je in gedachten? Bied uw perspectief en ideeën aan in de opmerkingen hieronder.

Als je dit artikel leuk vond, druk dan op die klapknop hit om anderen te helpen het te vinden.

Over mij

Hallo daar, ik ben Tasos; een software-engineer die van internet houdt en momenteel veel werkt met React Native en React. Ik ben de mede-oprichter van het softwarebureau Coded Lines, waar we end-to-end mobiele en webprojecten uitvoeren met de nadruk op in-app marketing. Als het klinkt wat u zoekt, neem dan hier contact met mij op: tasos.maroudas@codedlines.com. Bedankt voor het langskomen :)

___________________________________________________________________

Bedankt

George Karboulonis voor proeflezen