Zunächst möchte ich Sie daran erinnern, dass React Native (RN) eine plattformübergreifende Technologie zum Erstellen mobiler Apps ist. Viele Leute denken, dass der Hauptvorteil die Verwendung einer einzigen Codebasis für zwei Anwendungen ist, aber ich halte dies nicht für den wertvollsten in RN. Der Kernwert ist die Verwendung von React mit all seinen Vorteilen, einschließlich der breiteren Webentwicklungs-Community. Für React-Entwickler ist es durchaus sinnvoll, mobile Apps mit React Native zu erstellen, nachdem sie solide Erfahrungen mit React gesammelt haben. Die mobile Welt unterscheidet sich jedoch stark vom Web. Heute möchte ich Ihnen mitteilen, worauf Sie beim Eintauchen in die Welt der mobilen Entwicklung achten sollten.
1. Kompaktheit des Bildschirms
CSS geht davon aus, dass Sie mit einem Pixel als physikalische Einheit von 1/96 Zoll arbeiten. Dies ist nützlich, wenn Sie eine Website nur für Desktop-Computer erstellen. Wenn Sie jedoch an einer Website für mobile Geräte arbeiten, müssen Sie unterschiedliche Bildschirmdichten berücksichtigen. Aus diesem Grund benötigen Sie unterschiedliche Ränder, Auffüllungen für unterschiedliche Geräte und unterschiedliche Elemente (wie Bilder). Es gibt einen guten Artikel , der den mobilen Ansatz erklärt. Alternativ können Sie direkt auf die Android Developer- Ressource verweisen .
2. Navigation
Ein Webbrowser verfügt normalerweise über die aktuelle Seite, eine Zurück-Schaltfläche zum Speichern des Verlaufs und andere Anker. In der mobilen Version der Site haben wir stattdessen Bildschirme und Navigation zwischen ihnen, die in klaren Mustern agieren: Navigation durch Registerkarten entlang des Stapels und Zurückverfolgen. Sie können hierfür keinen React-Router verwenden, aber Sie können stattdessen die React-Navigationsbibliothek für die reaktionsschnelle Navigation verwenden .
Animierte Tab-Navigation in React-Native
3. Stile
Hier in der mobilen Welt funktioniert CSS nicht und keine der damit funktionierenden Lösungen funktioniert. Sie können CSS-in-JS, LESS oder nichts anderes verwenden. Stattdessen können Sie JSON-Objekte verwenden, um Komponentenstile zu definieren.
Hinweis:
- Verwenden Sie immer StyleSheet.create ({}), damit React-Native Stile zwischenspeichern kann.
- Flexbox ist immer noch hier, nur hat es einen anderen Namen.
Styles Beispiel für React-Native
4. Netzwerk
Wenn Sie eine Website oder Desktop-Anwendung mit React (z. B. Electron) erstellen, können Sie sich auf eine gute und einigermaßen stabile Internetverbindung verlassen. Aber jetzt sprechen wir über mobile Geräte, und hier kann das Internet sehr langsam, instabil oder sogar abwesend sein. Daher ist es notwendig, eine Anwendung zu entwickeln, die diese Besonderheit berücksichtigt: Verbindungsanforderungen, die offline arbeiten (z. B. Caching). Die Verbindung kann auch während des Betriebs unterbrochen werden, daher müssen Sie darauf vorbereitet sein.
5. Unterschrift
Im Gegensatz zu einer Website, die einfach auf einem S3-kompatiblen Speicher bereitgestellt werden kann, muss eine mobile App digital signiert sein, damit das Telefon überprüfen kann, ob dem Entwickler vertraut wird. Dieser Vorgang kann sehr mühsam sein, insbesondere für iOS, wo Sie ein Programm für einen Entwickler kaufen , eine Anwendungs-ID, ein Profil erstellen, ein Signaturzertifikat generieren und exportieren müssen ... Auf der Android-Plattform sieht es einfacher aus: Sie können alle erforderlichen Daten über eine Befehlszeile oder mithilfe generieren Android Studio und verteilen Sie die App sofort.
6. Verbreitung
Nochmals: Sie können nicht einfach Inhalte in S3 oder eine virtuelle Maschine hochladen. Sie müssen Google Play und den App Store durchgehen oder Ihre Anwendung außerhalb des offiziellen Stores verteilen, z. B. wenn es sich um eine Unternehmensanwendung handelt, die nur für Mitarbeiter einer Organisation bestimmt ist. Der App Store erlaubt jedoch einfach nicht die Veröffentlichung der Anwendung direkt im App Store. Sie müssen eine MDM-Lösung verwenden oder sie einfach über MS App Center, Firebase Distribution usw. verteilen.
Darüber hinaus gibt es in Geschäften viele Regeln, die befolgt werden müssen. Dazu gehören Symbole, Grafiken, Richtlinien für Benutzeroberflächen , Berechtigungen, Sicherheit und mehr.
7. Werkzeuge
Sie können auch VSCode oder WebStore oder sogar Vim für die Codebearbeitung und Chrome als Debugger verwenden, oder Sie können Xcode und Android Studio für weitere Vorteile wie Protokolle, Überwachungstools, Dateibearbeitung und mehr verwenden. Sie werden auch Flipper, Reactotron und andere Tools lieben, die Ihre Arbeit mit React-Native beschleunigen.
React-Native in der WebStorm-IDE
8. Emulatoren, Simulatoren und Geräte
Für die Webentwicklung sind mehrere Browser ausreichend. Für die mobile Entwicklung müssen Sie den Code auf einem mobilen Gerät ausführen: Sie können Ihr Telefon verwenden, aber es ist unwahrscheinlich, dass Sie Geräte mit Android und iOS zur Hand haben.
Gute Nachrichten: Sie können Android-Emulatoren (die von Android Studio heruntergeladen und ausgeführt werden können) oder iOS-Simulatoren verwenden, die aus Xcode erstellt wurden, wenn Sie einen Mac verwenden (nein, Sie können iOS-Simulatoren zumindest legal nicht auf einer anderen Hardware haben ). Es ist eine völlig neue Erfahrung, aber es macht Spaß.
9. Beziehung zum nativen Code
Ihr js-Code bleibt bei Ihnen, interagiert aber auch mit nativem Code (Kotlin, Swift). Die Anwendung muss korrekt verknüpft sein, da sie sonst abstürzen oder fehlerhaft funktionieren kann. Die gute Nachricht ist, dass bei der Arbeit mit React-Native seit Version 0.60 die Verknüpfung für die meisten externen Bibliotheken automatisch erfolgt.
Architektur einer React-Native-Anwendung
10. Wiederverwendung des Codes
Endlich gute Nachrichten! Wenn Sie sowohl eine Webanwendung als auch eine mobile Anwendung erstellen, können Sie einen Teil des Codes wiederverwenden. Sie können definitiv den gesamten Domänen- und Netzwerkcode wiederverwenden, da keine Spezifität für das Internet oder mobile Geräte besteht. Sie können höchstwahrscheinlich auch die Geschäftslogik wiederverwenden, dies ist jedoch weniger wahrscheinlich.
In zukünftigen Artikeln hoffe ich, jeden dieser Punkte näher zu betrachten.