Opbygning af en mobilapplikation blev lettere for webudviklere, da størstedelen af den viden, der blev brugt i React.js biblioteket, kunne genbruges til React Native.
Her på Imaginær sky, vi bruger React Native for muligheden for at dele kode mellem web og mobil og at have IOS- og Android-apps i kun en kodebase. Dette giver os tid til at arbejde på ting, der virkelig betyder noget, som det endelige digitale produkts kvalitet.
Et af vores projekter bruger Expo som et værktøj til at håndtere nogle af React Native-kompleksiteterne som: biblioteksfejl (pakken er ikke installeret korrekt) app register (glemmer at konfigurere appnavnet efter oprettelse af dem) og nogle serverfejl (som kan løses ved at genstarte serveren). På trods af at det er en stor hjælp, løser Expo ikke alle de problemer, som opbygning af en mobilapp med et bibliotek på tværs af platforme efterlader os.
I denne artikel vil jeg liste 5 fejl, som vi som udviklere stod over for, mens vi oprettede en mobilapp i React Native (ved hjælp af Expo), og hvordan vi løste dem. Men først vil jeg kort introducere dig til dette værktøj: Expo.
Expo er en platform med et sæt værktøjer og tjenester bygget omkring React Native og dets økosystem, der hjælper os med at udvikle, bygge, og hurtigt implementere IOS- og Android-apps.
Det giver os mulighed for at have en genvej til de oprindelige opsætninger, håndtere binærfiler og lade dig med JavaScript-koden. Expo hjælper os også med at teste mobilapplikationen i IOS-enheder, som jeg vil diskutere senere i denne artikel.
Som vi nævnte ovenfor, brugte vi Expo til at filtrere de vigtigste almindelige problemer fra React Native.
Hvis du allerede har arbejdet med React Native før, eller hvis du er ved at bygge din næste mobilapp ved hjælp af dette bibliotek, vil du sandsynligvis finde et par problemer. Her er de top 5, vi stødte på, og hvordan vi løste dem:
I den første fase af vores app kørte alt problemfrit, da vi bare testede alt på IOS (vi havde ikke planer om at køre appen på Android-enheder). I anden fase fik vi at vide, at der også var behov for en Android-version. Mens vi hvilede vores sind forsikre, begyndte problemer at dukke op, da det værktøj, vi valgte, kunne få det til at ske.
Den første kørsel på Android Emulator fungerede ikke som vi forventede. Da vi gennemgik fejlfindingen (hvilket var meget svært at gøre på grund af manglen på fejlfindingsstøtte), Android-emulatoren brød og viste ikke fejlmeddelelsen. Vi fandt ud af en måde at fange fejlmeddelelsen ved at optage skærmen. Dette fik os til at opdage, at ændringen af den stil, der blev foretaget dynamisk for at håndtere animationen af elementerne på login-skærmen, ikke fungerer på Android på samme måde som det fungerer i IOS. Android understøtter ikke flex transformationer. Vi skiftede kolonner til rækker, så vi var nødt til at ændre vores tilgang for at kunne få denne animation til at fungere korrekt på IOS og Android.
Før du brugte Expo, var den bedste måde at håndtere fejl den, der er velkendt af JavaScript-økosystemet: at slette node_moduler og genopbygge igen, inklusive den indfødte kode. Heldigvis behøvede vi med Expo ikke at håndtere alle iOS- og Android-native builds, som React Native kræver. Vi havde bare brug for at løbe undefined eller undefined at få appen op og køre, som vi forventede.
Når du skriver kode i et værktøj på tværs af platforme, kan du antage, at appen opfører sig på samme måde på begge platforme. Selvom dette viser sig at være sandt i de fleste tilfælde, opdagede vi nogle hovedkarakteristika i vores udvikling, som var vanskelige at løse. For eksempel boksskygge og nogle biblioteker, som vil nævne i næste afsnit, fungerer ikke som forventet på Android-enheder.
Hvis din app kræver dyb indbygget funktionalitet, skal dit team det meste af tiden arbejde med indbygget kode, som vist af Airbnb i deres artikel.
En af de største udfordringer, der stod over for under opbygningen af denne mobilapplikation, var hvordan du administrerer billedaktiverne. Vi besluttede at bruge SVG-formatet med et af de mest anvendte biblioteker, react-native-svg. Da appen havde mange komplekse lodtrækninger, brugte vi SVG for at undgå at miste kvalitet. Det viste sig, at biblioteket til håndtering af SVG fungerede ikke på Android på samme måde som det fungerer på IOS. I nogle tilfælde fungerede det slet ikke med nogle billeder, der ikke blev vist efter bygningen. Vi var nødt til at lede efter en løsning, som vi fandt i dokumentationen: det var nødvendigt at distribuere billederne som statiske ressourcer og brug den oprindelige måde at håndtere billeder på. Det betyder at vælge den rigtige efter skærmens tæthed.
Under udviklingen af mobilapps måtte vi også beskæftige os med kasse-skyggehåndtering. Mens IOS opførte sig normalt (med en webside, der havde flere måder at style bokseskyggen på) havde Android kun en prop. Det kaldes højde og har kun en kontrol over dybden af skyggen. Igen en anden justering på komponenterne for at kunne efterligne boksskyggeeffekten. Her vi brugte nogle gennemsigtige PNG for at efterligne boksskygge-gennemsigtigheden på vores skærme.
For at være ærlig er implementering og test af mobile applikationer ikke React Native-problemer pr. Si. Udfordringen med at have en app kørende i en klients mobile enhed inden den officielle implementering på platformen, er velkendt. I vores udviklingsflow har vi valgt Expo for sin enkelhed, for at lette processen. Vores interessenter satte en emulator på deres maskiner (inden for den eneste forudsætning for at være en macOS-enhed), og efter udviklingssprinten af applikationen kunne de teste appen. For at få appen til at fungere på deres enheder, var vi nødt til at køre undefined (som genererede en.ipa fil klar til at blive installeret i enhedsemulatoren) og undefined, en.apk-fil, der også kunne installeres på en emulator eller på en faktisk enhed, da Android er mere fleksibel med hensyn til applikationer, der installeres på deres system.
Expo kommer som en stor hjælp, når vi har brug for at bygge mobile applikationer, som det giver mulighed for at strømline React Native kompleksiteter. På trods af sine ulemper letter det strømmen af at lave mobile applikationer, Forbedring af testprocessen.
De virkelige udfordringer begynder at dukke op, når din mobilapp begynder at vokse, og dens funktionaliteter bliver mere komplekse. Selvom du måske finder nogle problemer som dem, vi har nævnt ovenfor, React Native er en fantastisk ramme. Faktisk viser det sig som en af de største cross-platform rammer med et stort økosystem af biblioteker, værktøjer og selvfølgelig en kæmpe bag sig: Facebook.
Ved at kombinere det med Expo kan vi sende dejlige mobile applikationer til vores kunder med et lille team på rekordtid. Alle de fejl, der blev fundet under oprettelsen af denne React Native-mobilapp, kunne løses med den nødvendige fejlfindingstid og fællesskabshjælp.
Javascript-udvikler siden 2016 har jeg bygget mobile apps ved hjælp af Ionic og React Native. Guitarist og madlavningselsker.
People who read this post, also found these interesting:
.webp)
