Share
Tools, bibliotheken en services vormen een belangrijk onderdeel van het leven van elke ontwikkelaar, ongeacht de omgeving waarvoor u zich ontwikkelt. En React Native is geen uitzondering. In dit artikel zal ik je door enkele van de beste UI-frameworks, bibliotheken, componenten, ontwikkeltools en webservices leiden, waardoor je een gelukkiger en productiever React Native ontwikkelaar bent.
Visual Studio Code is een teksteditor met ingebouwde IntelliSense-, debugging- en Git-integratiemogelijkheden. Wat het echt goed maakt voor de ontwikkeling van React Native is de React Native hulpprogramma-extensie. Hiermee kunt u React Native-opdrachten uitvoeren vanuit het opdrachtpalet, IntelliSense voor React Native API's toevoegen en foutopsporingscode in de editor zelf.
Raadpleeg deze blogpost voor meer informatie over het instellen van Visual Studio Code voor React Native: VSCode voor React Native.
Als u Atom gebruikt, kunt u de Nuclide-plug-in installeren. Deze plug-in is speciaal gemaakt voor het werken met React Native, Flow en Hack-projecten. Het heeft een ingebouwde debugger en elementinspecteur met alle functies die u gewend bent in Chrome Developer Tools. Flow-ondersteuning betekent dat u automatisch aanvullen, type-hinting en codediagnostiek krijgt uit de verpakking.
Als je meer IDE- en editor-opties wilt verkennen, bekijk dan dit blogbericht in de Top 10 Editors for React Native.
Ontwikkelingshulpmiddelen hebben een breed bereik, dus ik zal elke tool groeperen op basis van de focus:
Als het op SDK's voor React Native aankomt, is er niets beter dan Expo. Met Expo kun je eenvoudig een app prototypen zonder Android Studio of Xcode. Het bevat een aantal componenten en bibliotheken om u te helpen uw ontwikkeling te versnellen.
De Expo-workflow bestaat uit het volgende:
Het is niet nodig om je telefoon op je computer aan te sluiten. Scan eenvoudig de QR-code op uw terminal met behulp van de Expo-client-app en uw app wordt automatisch uitgevoerd. Als u Genymotion gebruikt, ondersteunt Expo dat ook.
Het enige nadeel bij het gebruik van Expo is dat u geen aangepast pakket kunt opnemen dat de eigen functionaliteit van het apparaat gebruikt. Expo bevat al een aantal veelgebruikte native-pakketten, zoals de camera, Facebook en kaart. Maar als u een pakket moet gebruiken dat ze nog niet ondersteunen, moet u uw app 'uitwerpen'. Op dat moment is uw app alsof deze is gemaakt met react-native init, en je verliest ook de mogelijkheid om het uit te voeren met behulp van de Expo-client-app.
Het controleren van de kwaliteit van uw code is belangrijk, en dat is de reden waarom hulpmiddelen zoals ESLint bestaan. Kort samengevat: met een pluizige tool kunt u consistenter zijn met uw code door deze te vergelijken met een stijlgids. Een voorbeeld van een dergelijke stijlgids is de JavaScript-stijlgids van Airbnb, waarin regels worden gespecificeerd over hoe JavaScript-code moet worden geschreven. Het lintgereedschap controleert vervolgens uw code tegen die regels om ervoor te zorgen dat ze zijn gevolgd. Er is ook een stijlgids voor React-projecten.
Als je Sublime Text gebruikt, is hier een goede tutorial over hoe je het kunt configureren zodat je realtime feedback op de kwaliteit van je code kunt krijgen terwijl je codeert: Sublime Linting for React en ES6. Als u een andere editor of IDE gebruikt, moet u op zoek naar een overeenkomstige plug-in die ESLint gebruikt.
Als u statisch typen aan uw project wilt toevoegen, kunt u Flow gebruiken. Flow voegt statisch typen toe bovenop JavaScript zonder dat u wijzigingen in uw bestaande codebase hoeft aan te brengen. Dit komt omdat Flow probeert het type waar mogelijk af te leiden. Voor nieuwe projecten wordt echter aanbevolen dat u het type expliciet opgeeft om alle voordelen van het gebruik van Flow te benutten.
Als u aan de slag wilt gaan met Flow, vindt u hier een tutorial over hoe u Flow kunt instellen voor uw React Native-projecten.
Enzyme is een testhulpprogramma voor React waarmee je de uitvoer van je component kunt beweren, manipuleren en doorkruisen. Het biedt methoden zoals Ondiep() om "ondiep" uw componenten weer te geven, vind() om de gerenderde component te doorlopen, en verwachten() om de rekwisieten of de inhoud die wordt weergegeven binnen de component te doen gelden.
U kunt deze handleiding volgen voor Gebruik van enzym om componenten in React Native te testen om uw React Native app testbaar te maken met enzym. Als je nieuw bent bij enzym, kun je deze zelfstudie over het testen van reactieve componenten met enzymen en mokka lezen.
Reactotron is een desktop-app waarmee je NatCommect Reaction en Reaction kunt debuggen. Enkele van de belangrijkste functies zijn het inspecteren, wijzigen en abonneren op de app-status, het bijhouden van HTTP-aanvragen via de app, het benchmarken van de app-prestaties en tracking-fouten. Als u Redux gebruikt, kunt u zelfs acties verzenden en sagen volgen vanuit Reactotron.
Snowflake is een boilerplate voor React Native ontwikkeling met volledige stack. Het bevat alles van de voorkant tot de achterkant van de app. Dus als u alleen een tool wilt die u snel van start kan helpen, vindt u Snowflake misschien handig. U kunt de opmerkingen lezen voor meer informatie over welke pakketten en hulpmiddelen worden gebruikt om het op te zetten.
Als alternatief kunt u Ignite gebruiken. Het is een opdrachtregelprogramma dat ook een boilerplate, generators, stijlgids voor UI-componenten, API-testtool en meer omvat.
React Native wordt al geleverd met UI-componenten die u kunt gebruiken voor gebruikersinteractie. Het probleem is dat ze alleen de meest eenvoudige stijl hebben, zodat elk onderdeel kan worden onderscheiden voor wat het is (bijvoorbeeld knop, selectievakje). Als u aangepaste stijlen wilt toevoegen, moet u uw eigen CSS-code schrijven.
Hier komt NativeBase om de hoek kijken. Hiermee kan uw app echt native look en feel krijgen door hetzelfde ontwerp te implementeren dat wordt gebruikt in de native Android (Material Design) en iOS (Human Interface Guidelines) apps. Out of the box krijgt u aangepaste componenten zoals drijvende actieknoppen, spinners en het beste van alles, vormcomponenten.
React Native heeft een enorme gemeenschap erachter, dus er zijn veel bibliotheken en componenten die je kunt gebruiken. We kunnen er de hele dag over praten, dus om het kort te houden, zal ik me concentreren op de volgende gebieden:
React Navigatie stelt u in staat om eenvoudig navigatie in uw React Native-apps te implementeren met behulp van de ingebouwde navigators, zoals de Stack Navigator, Tab Navigator en Drawer Navigator. Maar dat is nog niet alles: naast in-app-navigatie omvat het ook deeplinking, Redux-integratie en webintegratie. Dit maakt het een echt robuuste bibliotheek voor het implementeren van navigatie.
MobX biedt de functionaliteit om de app-status van React bij te werken en te beheren. Wat het een goede kandidaat maakt voor staatsbeheer in React, is de eenvoud en testbaarheid. Het heeft ook een korte leercurve, dus zaken als async-functies en berekende waarden worden al achter de schermen afgehandeld.
Voor grotere en meer complexe toepassingen wordt Redux nog steeds aanbevolen. Dit komt omdat MobX erg liberaal is, net als Redux, dat strikte richtlijnen geeft over hoe de staat moet worden beheerd. Dus het is een verstandiger keuze voor grotere projecten met meer mensen die eraan werken.
React Native heeft al een animatie-API ingebouwd. In feite zijn er niet slechts één, maar twee API's voor het werken met animatie: geanimeerde API en lay-outanimatie. Die twee zijn erg krachtig, maar kunnen lastig zijn, vooral als je alleen basisanimaties wilt toepassen, zoals een object op en neer bewegen of laten stuiteren. In dergelijke gevallen komen componenten zoals Animatable van pas.
Hier is een lijst met componenten en bibliotheken die veel worden gebruikt in React Native-projecten. Deze zijn compatibel met zowel Android- als iOS-apparaten:
U kunt serverloze apps bouwen en de inzet van uw React Native-apps vergemakkelijken met behulp van webservices. Er is een overvloed aan webservices die er zijn, maar ik zal me concentreren op de volgende gebieden:
Realm is een real-time database met een focus op mobiele apps. Het bevat functies zoals tweerichtingsgegevenssynchronisatie, offlinefuncties en gegevensoverdracht. De Realm Mobile Database is open-source en cross-platform, wat betekent dat u de Realm Object Server op uw eigen server kunt hosten en vervolgens de Realm JavaScript-bibliotheek gratis kunt gebruiken.
Niet alle functies zijn beschikbaar in de ontwikkelaareditie, maar in de meeste gevallen zou het goed moeten zijn met alleen de ontwikkelaareditie omdat deze de belangrijkste functies bevat, zoals de objectdatabase, realtime-synchronisatie en verificatie. Hier is een vergelijking van wat u voor elke editie krijgt: Realm-producten en prijzen.
Als Realm te veel is voor uw behoeften, kunt u altijd blijven met de AsyncStorage API die wordt geleverd met React Native.
Fabric is een alles-in-één-service waarmee u, onder andere, analyses in uw app kunt toevoegen. er is antwoorden, waarmee u realtime statistieken krijgt over hoe uw app wordt gebruikt. Dit omvat het aantal actieve gebruikers, de sessielengte en retentiegraad. Er is ook Crashlytics, wat je krachtige crashrapportagemogelijkheden geeft. Alles gebeurt in realtime en u kunt het bekijken in het realtime dashboard van Fabric. U kunt de Fabric-bibliotheek gebruiken om Fabric gemakkelijk in te stellen voor uw React Native-app.
Als u liever vasthoudt aan een beproefde oplossing zoals Google Analytics, is er ook een bibliotheek waarmee u dat kunt doen.
Er is echt geen concurrentie als het gaat om het implementeren van pushmeldingen in apps. Met Firebase Cloud Messaging (voorheen bekend als Google Cloud Messaging) kunt u pushmeldingen verzenden naar zowel Android- als iOS-apps. U kunt het pakket react-native-fcm gebruiken om vanuit uw app met FCM te communiceren.
Met CodePush kunt u code-updates voor mobiele apps rechtstreeks op de apparaten van de gebruikers implementeren. CodePush fungeert als een centrale opslagplaats waar u wijzigingen in HTML, CSS, JavaScript en items zoals afbeeldingen kunt implementeren. De corresponderende CodePush-code in de app zou dan aan deze wijzigingen trekken. Dit is geweldig om bugfixes naar de app te pushen zonder deze te hoeven uploaden in de app store en te wachten op gebruikers om de app bij te werken. U kunt dit pakket gebruiken om updates vanuit CodePush op te halen in uw React Native-app.
Bitrise is een continue bezorgservice voor de ontwikkeling van mobiele apps. Hiermee kunt u uw tests uitvoeren, de app bouwen en automatisch naar de apparaten van uw gebruikers pushen telkens wanneer u uw code implementeert.
Bitrise kan worden geïntegreerd met een aantal services in elke stap van uw ontwikkelingsworkflow. Wanneer u bijvoorbeeld op GitHub naar uw releasetakken pusht, wordt Bitrise op de hoogte gesteld van die doorsteek webhooks. Het zal dan beginnen met het uitvoeren van de tests. Zodra de tests zijn geslaagd, begint het bouwproces. Als het slechts een "zachte release" is (bijvoorbeeld wijzigingen in de JavaScript-code), kunnen de wijzigingen via CodePush aan de gebruikers worden toegewezen. Maar als er wijzigingen in de systeemeigen code zijn (u hebt bijvoorbeeld een Camera-plug-in toegevoegd), dan kan Bitrise ook een APK of IPA bestand en implementeer het op Google Play of iTunes Connect.
Fastlane is een verzameling tools die het build- en releaseproces voor Android- en iOS-apps automatiseren. Voor iOS verwerkt het taken zoals het uitvoeren van tests, het genereren van schermafbeeldingen, ondertekening van de code en het vrijgeven van de app in de app store. Het bevat ook beta-testtools zoals Pilot en Boarding. piloot kunt u uw app uploaden naar iTunes Connect en uw TestFlight-bètatesters rechtstreeks vanaf de opdrachtregel beheren. Boarding creëert een aanmeldingspagina voor TestFlight-bètatesters.
De hulpprogramma's zijn meer gericht op iOS-implementatie, maar u kunt ook profiteren als u Android-apps implementeert. Momenteel zijn er slechts twee tools beschikbaar voor Android-implementatie: Supply en Screengrab.
Levering kunt u het uploaden van items zoals het app-pictogram, promo-afbeeldingen en schermafbeeldingen van uw app automatiseren. Hiermee kunt u ook uw bestaande apps bijwerken in de Google Play Store.
Screengrab, aan de andere kant, automatiseert het genereren van schermafbeeldingen voor meerdere apparaten. Elke schermafbeelding kan ook worden gelokaliseerd als uw app meerdere talen ondersteunt.
Dat is het! In dit artikel hebt u enkele hulpprogramma's, bibliotheken en services geleerd die u kunt gebruiken bij het ontwikkelen van React Native-apps. En jij dan? Wat zijn je go-to-tools als het gaat om het ontwikkelen van apps in React Native?
En terwijl je hier bent, bekijk enkele van onze andere berichten over de ontwikkeling van de React Native-app!
Accentsconagua