Share
Verktyg, bibliotek och tjänster är en viktig del av varje utvecklares liv, oavsett vilken miljö du utvecklar för. Och React Native är inget undantag. I den här artikeln kommer jag att gå igenom några av de bästa gränssnittskonstruktionerna, bibliotek, komponenter, utvecklingsverktyg och webbtjänster som gör dig till en lyckligare och mer produktiv React native-utvecklare.
Visual Studio Code är en textredigerare som har inbyggda IntelliSense, debugging och Git integration. Vad som gör det riktigt bra för React Native-utveckling är dess utvidgning av React native tools. Detta låter dig utföra React native kommandon från kommandot paletten, lägga till IntelliSense för React native API och debug-kod inom redigeraren själv.
För mer information om hur du ställer in Visual Studio Code for React native, kolla in det här blogginlägget: VSCode för React Native.
Om du använder Atom kan du installera Nuclide-plugin. Denna plugin skapades speciellt för att arbeta med React Native, Flow och Hack-projekt. Den har en inbyggd debugger och element inspektör med alla funktioner du brukar använda i Chrome Developer Tools. Flödesstöd innebär att du får autofyllning, typhint och koddiagnostik ur lådan.
Om du vill utforska fler IDE- och redigeringsalternativ, kolla in det här blogginlägget på Top 10 Editors for React Native.
Utvecklingsverktyg har ett brett omfång, så jag ska gruppera varje verktyg baserat på dess fokus:
När det gäller SDK för React native, slår ingenting på Expo. Expo gör att du enkelt kan prototyper en app utan att behöva Android Studio eller Xcode. Den innehåller en uppsättning komponenter och bibliotek som hjälper dig att påskynda din utveckling.
Expo-arbetsflödet består av följande:
Det finns ingen anledning att ansluta telefonen till din dator. Skanna enkelt QR-koden på din terminal med Expo-klientappen, och den kör automatiskt din app. Om du använder Genymotion, stöder Expo det också.
Den enda nackdelen när du använder Expo är att du inte kan inkludera något anpassat paket som använder enhetens inbyggda funktionalitet. Expo innehåller redan ett antal vanligt förekommande inhemska paket, t.ex. Kamera, Facebook och Karta. Men om du behöver använda ett paket som de inte redan stödjer, måste du "skicka ut" din app. Då kommer din app att vara som om den skapades med reagera-native init, och du kommer också att förlora möjligheten att köra den med Expo-klientappen.
Att kontrollera kvaliteten på din kod är viktig, och det finns därför verktyg som ESLint. I ett nötskal kan ett lintverktyg du överensstämma med din kod genom att kontrollera den mot en stilguide. Ett exempel på en sådan stilguide är Airbnbs JavaScript Style Guide som anger regler för hur JavaScript-kod ska skrivas. Linting-verktyget kontrollerar sedan din kod mot dessa regler för att säkerställa att de har följts. Det finns också en stilguide för React-projekt.
Om du använder sublim text är här en bra handledning om hur du kan konfigurera det så att du kan få realtids återkoppling om kvaliteten på din kod medan du kodar: Sublime Linting for React och ES6. Om du använder en annan redigerare eller IDE, se till att söka efter ett motsvarande plugin som använder ESLint.
Om du vill lägga till statisk typing för ditt projekt kan du använda Flow. Flöde lägger till statisk typning ovanpå JavaScript utan att du behöver göra några ändringar i din befintliga kodbas. Detta beror på att Flow försöker avleda typen när det är möjligt. För nya projekt rekommenderas det dock att du explicit anger typen för att skörda de fulla fördelarna med att använda Flow.
För att komma igång med Flow, här är en handledning om hur du kan ställa in Flow för dina React native projects.
Enzym är ett testverktyg för React som gör att du kan hävda, manipulera och granska din komponents utdata. Det tillhandahåller metoder som grund() att "grundligt" göra dina komponenter, hitta() att korsa den gjorda komponenten, och förvänta() att hävda rekvisita eller innehållet som gjorts inom komponenten.
Du kan följa den här handboken för att använda enzym till testkomponenter i React Native för att göra din React native app testbar med enzymet. Om du är ny på enzym kan du läsa denna handledning om testreaktorkomponenter med enzym och mocka.
Reactotron är en stationär app som låter dig felsöka React and React native apps. Några av dess viktigaste funktioner inkluderar inspektion, modifiering och abonnemang på appstaten, spårning av HTTP-förfrågningar som görs via appen, benchmarking av appens prestanda och spårningsfel. Om du använder Redux kan du även skicka åtgärder och spåra sagor från Reactotron.
Snowflake är en panna för full-stack React Native-utveckling. Den innehåller allt från fronten till baksidan av appen. Så om du bara vill ha ett verktyg som kan hjälpa dig snabbt komma igång så kan du hitta Snowflake användbart. Du kan läsa anteckningarna för mer information om vilka paket och verktyg som används för att lägga upp det.
Alternativt kan du använda Ignite. Det är ett kommandoradsverktyg som även innehåller en panna, generatorer, stilguide för UI-komponenter, API-testverktyg och mer.
React native kommer redan med användargränssnittskomponenter som du kan använda för användarinteraktion. Problemet är att de bara har den mest grundläggande styling för att varje komponent ska kunna särskiljas för vad den är (t ex knapp, kryssruta). Om du vill lägga till egna stilar måste du skriva din egen CSS-kod.
Det här är där NativeBase kommer in. Det låter din app ha ett verkligt inhemskt utseende genom att implementera samma design som används i inbyggda Android-apparater (Material Design) och iOS (Human Interface Guidelines). Utanför rutan får du anpassade komponenter som Flytande Action Knappar, Spinners, och bäst av allt, bilda komponenter.
React native har ett stort samhälle bakom det, så det finns massor av bibliotek och komponenter som du kan använda. Vi kunde spendera hela dagen och prata om dessa, så för att hålla sakerna kortfattat fokuserar jag på följande områden:
Med React Navigation kan du enkelt implementera navigering i dina React native apps genom att använda sina inbyggda navigatorer, t.ex. Stack Navigator, Tab Navigator och Drawer Navigator. Men det är inte allt, men förutom navigering i appen ingår även djupkoppling, Redux-integration och webbintegration. Detta gör det till ett mycket robust bibliotek för navigering.
MobX ger funktionaliteten att uppdatera och hantera app-tillståndet som används av React. Vad som gör det till en bra kandidat för statsledningen i React är dess enkelhet och testbarhet. Det har också en kort inlärningskurva, så saker som asyncfunktioner och beräknade värden hanteras redan bakom kulisserna.
För större och mer komplexa applikationer rekommenderas Redux fortfarande. Detta beror på att MobX är mycket liberal, inte till skillnad från Redux, som ger strikta riktlinjer för hur staten ska hanteras. Så det är ett klokare val för större projekt med fler som arbetar med dem.
React Native har redan ett animerings API inbyggt i det. Faktum är att det inte bara finns en, men två API: er för att arbeta med animering: Animerat API och LayoutAnimation. De två är mycket kraftfulla men kan vara besvärliga, speciellt om allt du vill göra är att använda grundläggande animeringar som att flytta ett objekt upp och ner eller göra det studsa. I sådana fall kan komponenter som Animatable komma till nytta.
Här är en lista över komponenter och bibliotek som vanligtvis används i React native projects. Dessa är kompatibla med både Android och iOS-enheter:
Du kan bygga serverlösa appar och underlätta utplaceringen av dina React native apps genom att använda webbtjänster. Det finns en mängd webbtjänster där ute, men jag fokuserar på följande områden:
Realm är en realtidsdatabas med fokus på mobilappar. Den innehåller funktioner som tvåvägs datasynkronisering, offline-första funktioner och datatryck. Realm Mobile Database är öppen källkod och plattform, vilket innebär att du kan vara värd för Realm Object Server på din egen server och sedan använda Realm JavaScript-biblioteket gratis.
Alla funktioner är inte tillgängliga i utvecklarutgåvan, men i de flesta användningsfall borde du ha det bra med bara utvecklarutgåvan, eftersom den innehåller kärnfunktioner som Objektdatabasen, Realtidsynkronisering och Autentisering. Här är en jämförelse av vad du får för varje utgåva: Realm Products and Pricing.
Om Realm är för mycket för dina behov kan du alltid hålla fast vid AsyncStorage API som levereras med React native.
Tyg är en allt-i-ett-tjänst som gör att du bland annat kan lägga till analyser i din app. Det finns svar, vilket ger dig realtidsstatistik om hur din app används. Detta inkluderar antalet aktiva användare, sessionslängden och retentionen. Det finns också Crashlytics, vilket ger dig kraftfulla rapporteringsmöjligheter. Allt detta händer i realtid, och du kan se den i Fabrics realtidsdashboard. Du kan använda Fabric-biblioteket för att enkelt skapa Fabric för din React native app.
Om du hellre vill hålla fast med en testad lösning som Google Analytics, finns det också ett bibliotek som låter dig göra det.
Det är verkligen ingen konkurrens när det gäller att implementera push-meddelanden i appar. Firebase Cloud Messaging (tidigare känd som Google Cloud Messaging) tillåter dig att skicka push-meddelanden till både Android och iOS-appar. Du kan använda paketet React-native-fcm för att kommunicera med FCM från din app.
CodePush låter dig distribuera koduppdateringar till mobilappar direkt till användarnas enheter. CodePush fungerar som ett centralt förråd där du kan distribuera ändringar till HTML, CSS, JavaScript och tillgångar som bilder. Den motsvarande CodePush-koden i appen skulle då dra dessa ändringar. Det här är utmärkt för att driva buggfixar till appen utan att behöva ladda upp det i appbutiken och vänta på att användarna uppdaterar appen. Du kan använda det här paketet för att dra uppdateringar från CodePush i din React Native app.
Bitrise är en kontinuerlig leveransservice för utveckling av mobilapp. Det låter dig köra dina test, bygga appen och trycka den automatiskt på användarnas enheter varje gång du distribuerar koden.
Bitrise integreras med en massa tjänster i varje steg i ditt utvecklings arbetsflöde. När du till exempel trycker på dina utgåvor på GitHub, meddelas Bitrise om det genom att trycka igenom webhakar. Det börjar sedan köra testen. När testen är klar börjar byggprocessen. Om det bara är en "mjuk release" (t.ex. ändring av JavaScript-koden) kan ändringarna distribueras till användarna genom CodePush. Men om det finns ändringar i den ursprungliga koden (till exempel du lagt till ett Kamera-plugin), kan Bitrise också bygga en APK eller IPA fil och distribuera den till Google Play eller iTunes Connect.
Fastlane är en samling verktyg som automatiserar bygg- och släppprocessen för Android och iOS-appar. IOS hanterar uppgifter som att köra dina tester, generera skärmdumpar, kodsignering och släppa appen till appbutiken. Det innehåller även beta-testverktyg som Pilot och Boarding. Pilot låter dig ladda upp din app till iTunes Connect och hantera dina TestFlight beta-testare direkt från kommandoraden. Boarding skapar en registreringssida för TestFlight beta-testare.
Verktygen är mer inriktade på iOS-distribution, men du kan också dra nytta av om du använder Android-appar. För närvarande finns det bara två verktyg tillgängliga för Android-distribution: Supply and Screengrab.
Tillförsel kan du automatisera uppladdning av tillgångar som appikonen, promo-grafiken och skärmdumpar av din app. Det låter dig också uppdatera dina befintliga appar på Google Play Butik.
Screen, Å andra sidan automatiserar genereringen av skärmdumpar för flera enheter. Varje skärmdump kan också lokaliseras om din app stöder flera språk.
Det är allt! I den här artikeln har du lärt dig några av de verktyg, bibliotek och tjänster som du kan använda när du utvecklar React native apps. Hur är det med dig? Vad är dina go-to-verktyg när det gäller att utveckla appar i React Native?
Och medan du är här, kolla in några av våra andra inlägg på React Native app development!
Accentsconagua