Das Erstellen einer mobilen Anwendung wurde für Webentwickler einfacher, da der Großteil des in der Bibliothek React.js verwendeten Wissens für React Native wiederverwendet werden konnte.
Hier bei Imaginary Cloud, wir verwenden Reagieren Sie nativ für die Möglichkeit, Code zwischen Web und Handy auszutauschen und IOS- und Android-Apps in nur einer Codebasis zu haben. Das gibt uns Zeit, um an Dingen zu arbeiten, die wirklich wichtig sind, wie der Qualität des digitalen Endprodukts.
Eines unserer Projekte verwendet Expo als Tool, um einige der Komplexitäten von React Native zu bewältigen, wie zum Beispiel: Bibliotheksfehler (das Paket wird nicht korrekt installiert), App-Registrierung (ich habe vergessen, den App-Namen nach dem Erstellen zu konfigurieren) und einige Serverfehler (das kann durch einen Neustart des Servers behoben werden). Obwohl Expo eine große Hilfe ist, löst sie nicht alle Probleme, die uns die Erstellung einer mobilen App mit einer plattformübergreifenden Bibliothek bereitet.
In diesem Artikel werde ich 5 Fehler auflisten, mit denen wir als Entwickler bei der Erstellung einer mobilen App in React Native (mit Expo) konfrontiert waren, und wie wir sie gelöst haben. Aber zuerst stelle ich Ihnen kurz dieses Tool vor: Expo.
Expo ist eine Plattform mit einer Reihe von Tools und Diensten, die auf React Native und seinem Ökosystem basieren und uns helfen, IOS- und Android-Apps zu entwickeln, zu erstellen und schnell bereitzustellen.
Es ermöglicht uns, eine Abkürzung zu den nativen Setups zu haben, die Binärdateien zu verwalten und Ihnen den JavaScript-Code zur Verfügung zu stellen. Expo hilft uns auch dabei, die mobile Anwendung auf IOS-Geräten zu testen, wie ich später in diesem Artikel erläutern werde.
Wie bereits erwähnt, haben wir Expo verwendet, um die wichtigsten häufig auftretenden Probleme aus React Native herauszufiltern.
Wenn Sie bereits zuvor mit React Native gearbeitet haben oder im Begriff sind, Ihre nächste mobile App mit dieser Bibliothek zu erstellen, werden Sie wahrscheinlich auf einige Probleme stoßen. Hier sind die 5 wichtigsten, auf die wir gestoßen sind, und wie wir sie gelöst haben:
In der ersten Phase unserer App lief alles reibungslos, da wir gerade alles auf IOS getestet haben (wir hatten nicht vor, die App auf Android-Geräten auszuführen). In der zweiten Phase wurde uns mitgeteilt, dass auch eine Android-Version benötigt wird. Während wir uns erholten und vergewisserten, dass das von uns gewählte Tool das ermöglichen könnte, traten Probleme auf.
Der erste Lauf auf dem Android-Emulator funktionierte nicht wie erwartet. Während wir das Debuggen durchgingen (was aufgrund der fehlenden Debug-Unterstützung sehr schwierig war), Der Android-Emulator ist kaputt gegangen und hat die Fehlermeldung nicht angezeigt. Wir haben eine Möglichkeit gefunden, die Fehlermeldung zu erfassen, indem wir den Bildschirm aufzeichnen. Dies führte uns zu der Entdeckung, dass die Änderung des Stils, die dynamisch vorgenommen wurde, um die Animation der Elemente auf dem Anmeldebildschirm zu handhaben, auf Android nicht so funktioniert wie in IOS. Android unterstützt keine Flex-Transformationen. Wir haben Spalten in Zeilen geändert, also mussten wir unseren Ansatz ändern, damit diese Animation auf IOS und Android richtig funktioniert.
Vor der Verwendung von Expo war die beste Art, mit Fehlern umzugehen, die dem JavaScript-Ökosystem bekannt war: das Löschen der Knotenmodule und alles noch einmal neu aufbauen, einschließlich des Native-Codes. Zum Glück mussten wir mit Expo nicht alle nativen IOS- und Android-Builds bearbeiten, die React Native benötigt. Wir mussten nur rennen Expo-Build: Android oder Expo-Build: iOS um die App wie erwartet zum Laufen zu bringen.
Wenn Sie Code in einem plattformübergreifenden Tool schreiben, können Sie davon ausgehen, dass sich die App auf beiden Plattformen gleich verhält. Obwohl sich herausstellt, dass dies in den meisten Fällen zutrifft, haben wir bei unserer Entwicklung einige Hauptmerkmale entdeckt, die sich nur schwer beheben ließen. Zum Beispiel Box-Schatten und einige Bibliotheken, wie im nächsten Abschnitt erwähnt, funktionieren auf Android-Geräten nicht wie erwartet.
Wenn Ihre App umfangreiche native Funktionen erfordert, muss Ihr Team in den meisten Fällen mit nativem Code arbeiten, wie von Airbnb in ihrem Artikel.
Eine der größten Herausforderungen bei der Entwicklung dieser mobilen Anwendung war wie man die Bild-Assets verwaltet. Wir haben uns entschieden, das SVG-Format mit einer der am häufigsten verwendeten Bibliotheken zu verwenden, React-Native-SVG. Da die App viele komplexe Zeichnungen hatte, haben wir SVG verwendet, um Qualitätsverluste zu vermeiden. Es stellte sich heraus, dass Die Bibliothek für den Umgang mit SVG funktionierte auf Android nicht so wie auf IOS. In einigen Fällen funktionierte es überhaupt nicht, da einige Bilder nach dem Build nicht angezeigt wurden. Wir mussten nach einer Lösung suchen, die wir in der Dokumentation gefunden haben: Sie musste die Bilder verteilen als statische Ressourcen und verwenden Sie die native Art, mit Bildern umzugehen. Das bedeutet, anhand der Bildschirmdichte das richtige auszuwählen.
Während der Entwicklung der mobilen App mussten wir uns auch damit auseinandersetzen Box-Shadow-Behandlung. Während sich IOS normal verhielt (eine Webseite hatte mehrere Möglichkeiten, den Box-Shadow zu gestalten), hatte Android nur eine Requisite. Es heißt Höhe und lässt sich mit nur einem Steuerelement für die Tiefe des Schattens steuern. Auch hier eine weitere Anpassung der Komponenten, um den Box-Shadow-Effekt emulieren zu können. Hier wir haben etwas transparentes PNG verwendet um die Box-Shadow-Transparenz auf unseren Bildschirmen nachzuahmen.
Um ehrlich zu sein, sind die Bereitstellung und das Testen mobiler Anwendungen nicht per se ein Problem mit React Native. Die Herausforderung, eine App vor der offiziellen Bereitstellung auf der Plattform auf dem Mobilgerät eines Kunden laufen zu lassen, ist allgemein bekannt. In unserem Entwicklungsablauf haben wir uns für Folgendes entschieden Weltausstellung wegen seiner Einfachheit, um den Prozess zu erleichtern. Unsere Stakeholder richteten einen Emulator auf ihren Computern ein (unter der einzigen Voraussetzung, dass es sich um ein macOS-Gerät handelt), und nach dem Entwicklungssprint der Anwendung konnten sie die App testen. Damit die App auf ihren Geräten funktioniert, mussten wir sie ausführen expo build: ios -t 'simulator' --release-channel staging (was eine IPA-Datei generiert hat, die bereit ist, im Geräteemulator installiert zu werden) und expo build: android -t 'simulator' --release-channel-staging, eine APK-Datei, die auch auf einem Emulator oder auf einem tatsächlichen Gerät installiert werden könnte, da Android flexibler ist, was die Installation von Anwendungen auf ihrem System angeht.
Expo ist eine große Hilfe, wenn wir mobile Anwendungen entwickeln müssen, da es ermöglicht die Optimierung der Komplexität von React Native. Trotz seiner Nachteile erleichtert es die Erstellung mobiler Anwendungen, Verbesserung des Testprozesses.
Die wahren Herausforderungen treten auf, wenn Ihre mobile App wächst und ihre Funktionen komplexer werden. Obwohl Sie möglicherweise auf einige Probleme wie die oben genannten stoßen, React Native ist ein großartiges Framework. Tatsächlich zeigt es sich als eines der größten plattformübergreifenden Frameworks mit einem großartigen Ökosystem aus Bibliotheken, Tools und natürlich einem Giganten dahinter: Facebook.
Durch die Kombination mit Expo können wir unseren Kunden mit einem kleinen Team in Rekordzeit reizvolle mobile Anwendungen liefern. Alle Fehler, die bei der Erstellung dieser mobilen React Native-App gefunden wurden, konnten mit der erforderlichen Debug-Zeit und der Hilfe der Community behoben werden.
Ich bin seit 2016 Javascript-Entwickler und habe mobile Apps mit Ionic und React Native erstellt. Gitarrist und Kochliebhaber.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
