Att bygga en mobilapplikation blev enklare för webbutvecklare eftersom majoriteten av kunskapen som används i React.js biblioteket kunde återanvändas till React Native.
Här på Imaginärt moln, vi använder React Native för möjligheten att dela kod mellan webb och mobil och att ha IOS- och Android-appar i bara en kodbas. Detta ger oss tid att arbeta med saker som verkligen betyder något, som den slutliga digitala produktens kvalitet.
Ett av våra projekt använder Expo som ett verktyg för att hantera några av React Native-komplexiteten som: biblioteksfel (paketet har inte installerats korrekt), appregister (glömmer att konfigurera appnamnet efter att ha skapat dem) och några serverfel (som kan åtgärdas genom att starta om servern). Trots att det är till stor hjälp löser Expo inte alla problem som att bygga en mobilapp med ett plattformsbibliotek lämnar oss.
I den här artikeln kommer jag att lista 5 fel som vi som utvecklare mötte när vi skapade en mobilapp i React Native (med Expo) och hur vi löste dem. Men först ska jag kort presentera dig för det här verktyget: Expo.
Expo är en plattform med en uppsättning verktyg och tjänster byggda kring React Native och dess ekosystem som hjälper oss att utveckla, bygga, och snabbt distribuera IOS- och Android-appar.
Det tillåter oss att ha en genväg till de ursprungliga inställningarna, hantera binärerna och låta dig med JavaScript-koden. Expo hjälper oss också att testa mobilapplikationen i IOS-enheter, som jag kommer att diskutera senare i den här artikeln.
Som vi nämnde ovan använde vi Expo för att filtrera de viktigaste vanliga problemen från React Native.
Om du redan arbetat med React Native tidigare eller om du ska bygga din nästa mobilapp med det här biblioteket, du kommer sannolikt att hitta några problem. Här är de fem bästa vi stötte på och hur vi löste dem:
I den första fasen av vår app gick allt smidigt, eftersom vi bara testade allt på IOS (vi hade inga planer på att köra appen på Android-enheter). I den andra fasen fick vi veta att en Android-version också behövdes. Medan vi vilade våra sinnen försäkrade, eftersom verktyget vi valde kunde få det att hända, började problem dyka upp.
Den första körningen på Android Emulator fungerade inte som vi förväntade oss. När vi gick igenom felsökningen (vilket var mycket svårt att göra på grund av bristen på felsökningsstöd), Android-emulatorn bröt och visade inte felmeddelandet. Vi räknade ut ett sätt att fånga felmeddelandet genom att spela in skärmen. Detta ledde till att vi upptäckte att förändringen av stilen som gjordes dynamiskt för att hantera animeringen av elementen på inloggningsskärmen inte fungerar på Android på samma sätt som det fungerar i IOS. Android stöder inte flextransformationer. Vi bytte kolumner till rader, så vi var tvungna att ändra vårt tillvägagångssätt för att kunna få den här animationen att fungera korrekt på IOS och Android.
Innan du använde Expo var det bästa sättet att hantera fel det som var välkänt av JavaScript-ekosystemet: att ta bort node_moduler och bygga om igen, inklusive den infödda koden. Lyckligtvis, med Expo, behövde vi inte hantera alla IOS- och Android-inbyggda byggnader som React Native kräver. Vi behövde bara springa expo build: android eller expo byggnad:ios att ha appen igång som vi förväntat oss.
När du skriver kod i ett plattformsoberoende verktyg kan du anta att appen skulle bete sig på samma sätt på båda plattformarna. Även om detta visar sig vara sant för de flesta fall, upptäckte vi några huvudegenskaper i vår utveckling som var svåra att ta itu med. Till exempel boxskugga och vissa bibliotek, som kommer att nämnas i nästa avsnitt, fungerar inte som förväntat på Android-enheter.
Om din app kräver djup inbyggd funktionalitet kommer teamet oftast att behöva arbeta med inbyggd kod, vilket visas av Airbnb i deras artikel.
En av de största utmaningarna när man byggde denna mobilapplikation var hur du hanterar bildresurser. Vi bestämde oss för att använda SVG-formatet med ett av de mest använda biblioteken, react-native-svg. Eftersom appen hade många komplexa dragningar använde vi SVG för att undvika att förlora kvalitet. Visade sig att biblioteket för att hantera SVG fungerade inte på Android på samma sätt som det fungerar på IOS. I vissa fall fungerade det inte alls med vissa bilder som inte visades efter byggandet. Vi var tvungna att leta efter en lösning som vi hittade i dokumentationen: det behövdes att distribuera bilderna som statiska resurser och använd det ursprungliga sättet att hantera bilder. Det betyder att du väljer rätt efter skärmtätheten.
Under utvecklingen av mobilappar var vi också tvungna att hantera hantering av boxskuggor. Medan IOS uppförde sig normalt (med en webbsida som har flera sätt att utforma boxskuggan) hade Android bara en rekvisita. Det kallas höjd och har bara en kontroll över skuggans djup. Återigen, en annan justering på komponenterna för att kunna emulera boxskuggeffekten. Här vi använde lite transparent PNG för att efterlikna boxskuggans transparens på våra skärmar.
För att vara ärlig, distribution och testning av mobilapplikationer är inte React Native-problem per si. Utmaningen att ha en app som körs i en klients mobila enhet innan den officiella distributionen på plattformen, är välkänd. I vårt utvecklingsflöde har vi valt Expo för sin enkelhet, för att underlätta processen. Våra intressenter satte en emulator på sina maskiner (inom den enda förutsättningen för att vara en macOS-enhet) och efter applikationens utvecklingssprint kunde de testa appen. För att appen ska fungera på deras enheter var vi tvungna att köra expo build: ios -t 'simulator' - release-channel iscensättning (som genererade en.ipa fil redo att installeras i enhetsemulatorn) och expo build: android -t 'simulator' - release-channel iscensättning, en.apk-fil som också kan installeras på en emulator eller på en verklig enhet, eftersom Android är mer flexibel när det gäller applikationer som installeras på deras system.
Expo kommer som en stor hjälp när vi behöver bygga mobila applikationer, som det gör det möjligt att effektivisera React Native komplexiteter. Trots sina nackdelar underlättar det flödet av att skapa mobila applikationer, Förbättra testprocessen.
De verkliga utmaningarna börjar dyka upp när din mobilapp börjar växa och dess funktioner blir mer komplexa. Även om du kanske hittar några problem som de vi har nämnt ovan, React Native är ett bra ramverk. Faktiskt, det visar sig som en av de största plattformsramarna med ett stort ekosystem av bibliotek, verktyg och naturligtvis en jätte bakom sig: Facebook.
Genom att kombinera det med Expo kan vi leverera härliga mobilapplikationer till våra kunder, med ett litet team, på rekordtid. Alla fel som hittades när du skapade denna React Native-mobilapp kunde lösas med nödvändig felsökningstid och communityhjälp.
Javascript-utvecklare sedan 2016 har jag byggt mobilappar med Ionic och React Native. Gitarrspelare och matlagningsälskare.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
