Hinweise für Freiberufler: Entwicklung der First React Native-Anwendung

Der Autor des Materials, dessen Übersetzung wir veröffentlichen, hat kürzlich seine erste mobile Anwendung veröffentlicht, die in React Native geschrieben wurde. So kam es, dass diese Anwendung auch sein erstes Projekt war, das er als freiberuflicher Programmierer erstellte. Hier wird er darüber sprechen, was er während der Arbeit zu bewältigen hatte - von der Initialisierung des Projekts bis zu seiner Veröffentlichung im App Store und bei Google Play.

Warum habe ich mich freiberuflich entschieden?

Letzten Mai habe ich ein wunderbares freiberufliches Projekt aufgetaucht. Zu dieser Zeit war ich Full-Stack-Entwickler bei einem Startup in Stockholm. Dies war mein erster Programmierjob, den ich erst vor einem Jahr dort bekommen habe ( hier spreche ich ausführlicher darüber).

Der Sommer rückte immer näher, das Arbeitstempo, bevor es Tag für Tag ruhiger wurde. Es gab einmal eine Woche, in der ich mich in der Reihenfolge meiner Priorität um den technischen Support kümmern musste. Ich musste mich mit einigen Fehlern auseinandersetzen, ich war ein wenig gelangweilt, die Arbeit gefiel mir nicht.

Als ich in einer so düsteren Stimmung war, informierte mich mein Vater über seine Absichten, eine mobile Anwendung für die Kunden seines Unternehmens zu erstellen. Obwohl er wusste, dass ich bei der Arbeit sehr beschäftigt war und nicht damit gerechnet hatte, dass ich meine ganze Zeit für die Umsetzung seiner Idee aufwenden würde, fragte er mich dennoch, ob ich in diesem neuen Projekt eine Art Berater werden möchte. Ich fühlte mich dann hungrig nach einer interessanten mentalen Arbeit und beantwortete seine Frage daher positiv. Obwohl ich dies ursprünglich nicht geplant hatte, wurde ich vom Berater zu einem führenden Anwendungsentwickler.

Hier fragen Sie sich vielleicht, warum jemand versucht, mobile Entwicklung zu betreiben, nachdem er ein Jahr lang nicht als professioneller Webentwickler gearbeitet hat? Wäre es nicht klüger, weiterhin Erfahrungen in einer ausgewählten Nische zu sammeln, professionell zu wachsen und einen beeindruckenden Lebenslauf zu erstellen?

Ich stimme vollkommen zu, dass dies viel vernünftiger wäre. Aber ich bin ein hoffnungsloser "Multi-Station-Arbeiter", der vor einigen Jahren beschlossen hat, Karriereentscheidungen nicht auf der Grundlage einer bestimmten Strategie, sondern nach meinen eigenen Vorlieben zu treffen. Ich beschloss zu tun, was mir Freude macht. Mit anderen Worten, mein Lebenslauf sieht jetzt so aus, dass er kaum noch unberechenbarer werden kann.

Natürlich schließen sich das, was Sie wollen, und die Verfolgung einer Karrierestrategie nicht unbedingt gegenseitig aus. Tatsächlich hat mir sowohl meine frühere Arbeit als auch der Arbeitgeber sehr gut gefallen. Es ist einfach so passiert, dass ich auf ein anderes Projekt gestoßen bin, dessen Verlangen stärker war als der Wunsch, das zu tun, was ich vorher getan habe.

Was hat dieses Projekt für mich so attraktiv gemacht? Was machte ihn interessanter, als an einem sich schnell entwickelnden Produkt zu arbeiten, das von Tausenden von Unternehmen als Teil eines Teams verwendet wird, das aus den besten Menschen besteht, die ich getroffen habe? Diese Frage kann folgendermaßen beantwortet werden: Dies ist Freiheit, dies ist die Herausforderung, die mir die Notwendigkeit gegeben hat, ein schwieriges Problem zu lösen, und dies ist der Wunsch nach Selbstentwicklung.

Warum wurde beschlossen, React Native zu verwenden?

Als ich mich dem Projekt anschloss, hatte mein Kunde bereits mehrere Angebote von lokalen Digitalagenturen erhalten. Noch bevor ich über die Möglichkeit nachdachte, die Anwendung unabhängig zu entwickeln, wurde ich freundlich gebeten, diese Vorschläge zu bewerten. Als ich sie ansah, war ich einfach erstaunt über ihre schlechte Qualität.

Eine der Agenturen sandte einen Überblick über das Design der Anwendung, der nicht nur unordentlich aussah, sondern auch nicht mit der auf der Website des Kunden angegebenen Unternehmensidentität übereinstimmte. Ein anderer schlug himmelhohe Preise vor - sowohl für die Entwicklung als auch für die Projektunterstützung. Der dritte hat anscheinend den Vorschlag gesendet, ohne die Anforderungen des Kunden wirklich studiert zu haben. Alle Agenturen, die die Vorschläge eingereicht hatten, hatten eines gemeinsam: Sie wollten einen Antrag unter Verwendung des Cordova-Hybrid-Frameworks erstellen.

Das ist aber noch nicht alles. Obwohl Cordova ein völlig kostenloses Open-Source-Tool ist, hat eine der Agenturen sogar versucht, Informationen darüber zu verbergen, welche spezifische Technologie verwendet wird. Stattdessen sprachen Vertreter der Agentur von einer intern erstellten „internen“ Entwicklungsplattform für mobile Apps. Es scheint, dass wir über ein kleines Add-On über Cordova gesprochen haben, das nur dazu dient, die exklusiven Rechte dieser Agentur für die Wartung der Anwendung zu sichern und den möglichen zukünftigen Übergang des Kunden zu einem anderen Entwickler schwierig und teuer zu machen. Im Allgemeinen waren die fraglichen Vorschläge nicht besonders beeindruckend.

Es sollte angemerkt werden, dass ich nichts gegen hybride Frameworks habe. Ich benutze ständig Anwendungen, die darauf basieren. Dies ist zum Beispiel Google Mail, Slack, Atom, Figma. Damals hatte ich jedoch schon seit einiger Zeit von React Native gehört, wie Sie mit dieser Bibliothek plattformübergreifende mobile Anwendungen mit JavaScript erstellen können, die nicht hybride sind!

Und was jetzt? Ist es auf schwierige Weise erforderlich, iOS und Android bei der Entwicklung nativer JavaScript-Anwendungen zu unterstützen? Diese Frage stellte sich aufgrund der Tatsache, dass sich bei Interesse an solchen Anwendungen herausstellte, dass iOS-Anwendungen mit Objective-C oder Swift geschrieben wurden und Java oder Kotlin zur Entwicklung von Android-Anwendungen verwendet wurden.

Natürlich gibt es hier keine besonderen Tricks. Also hatte ich noch eine Frage. Wie können reaktive native Anwendungen als echte native Anwendungen bezeichnet werden? Wenn Sie diese Frage auf den Punkt bringen, stellt sich heraus, dass sich das Ganze in der API befindet. Ich habe mehr Zeit gebraucht, um dies zu verstehen, als ich zugeben möchte, aber die Art und Weise, wie React Native-Anwendungen, native genannt, mit mobilen Plattformen arbeiten, besteht nicht darin, JavaScript-Code zu starten oder solchen Code zu kompilieren nativer Code. Die Sache ist, dass diese Anwendungen API-Anforderungen ausführen, die native Komponenten mit Objective-C auf dem iPhone und Java auf Android anzeigen.

Wenn Sie ein tieferes Verständnis der Grundlagen von React Native erlangen möchten, empfehle ich Quora diese Antwort. Dies ist ein Gespräch mit React Conf und dieses Material, das sich mit der Veröffentlichung von React Native befasst.

Obwohl ich zu diesem Zeitpunkt nicht genau wusste, was in den Eingeweiden von React Native-Anwendungen vor sich ging, wusste ich, dass die Arbeit solcher Anwendungen auf die Ausführung von nativem Code beschränkt war. Dies war mein Hauptargument gegen die Wahl einer der von Agenturen angebotenen Cordova-basierten Lösungen. Ich dachte, wenn ein Unternehmen eine mobile Anwendung benötigt, sollte diese Anwendung nativ sein. Wenn jemand eine Anwendung benötigt, die auf HTML / CSS / JS basiert, ist es besser, das Geld einfach auszugeben, um die mobilen Funktionen seiner Webanwendung zu verbessern.

Als ich diese Argumentation einem Kunden mitteilte, stellte er mir eine Frage, ob ich jemanden kenne, der eine solche Anwendung erstellen kann. Ich antwortete, dass ich es nicht wusste. Dann fragten sie mich, ob ich es selbst machen könnte. "Ich kann nicht", antwortete ich. Zu diesem Zeitpunkt war ich jedoch bereits an all dem interessiert und konnte einfach nicht anders, als mit React Native zu experimentieren, wobei ich die Spezifikationen der Anwendung als Grundlage für meine Experimente verwendete.

Bevor ich dies selbst realisierte, konnte ich die Basis für die Anwendung erstellen. Infolgedessen einigten sich der Kunde und ich nur wenige Wochen nach diesem Gespräch darauf, die Anwendung für ihn zu entwickeln.

Anwendungsspezifikationen

Bevor wir uns mit den technischen Details befassen, möchte ich kurz darauf eingehen, um welche Art von Anwendung es sich handelt.

Der Kunde, für den die Anwendung entwickelt wird, ist ein Unternehmen in Stockholm, das sich mit der Verwaltung von Coworking-Kollektivbüros befasst. Mit anderen Worten, es handelt sich um Büroräume, die von verschiedenen Unternehmen gemietet werden können. Im Moment hat mein Kunde ungefähr 10 solcher bestehenden Büros, in denen ungefähr 400 Unternehmen mit 1.400 Mitarbeitern Flächen mieten. Dies sind die Mieter der Büros und die Zielgruppe der Anwendung.


Erholungsgebiet in einem der Coworking

Nachdem ich die zukünftige Anwendung mit dem Projektmanager besprochen hatte, gelang es mir, einige Anforderungen für das Projekt herauszufinden:

• Die Möglichkeit, sich anzumelden, abzumelden und das Passwort zurückzusetzen. Bitte beachten Sie, dass alle Benutzerkonten von Administratoren erstellt werden und die Anwendung die Registrierung im System nicht unterstützt. Wenn Sie diese Anwendung herunterladen möchten, können Sie daher nicht damit arbeiten.
• Benutzerprofil anzeigen und bearbeiten: Name, E-Mail-Adresse, Passwort, Avatar.
• Unterstützung für Push-Benachrichtigungen.
• Der Home-Bereich, mit dem der Benutzer die Nachrichten des gesamten Unternehmens und insbesondere die vom Unternehmen gemieteten Neuigkeiten zu Coworking kennenlernen kann.
• Community-Bereich, in dem der Benutzer Informationen zu verschiedenen Coworking-Vorgängen anzeigen, seine Manager kontaktieren und sehen kann, welche Unternehmen an einem bestimmten Coworking beteiligt sind.
• Konferenzbereich, in dem Sie Tagungsräume buchen und Reservierungen verwalten können.
• Abschnittsauswahl, in der der Benutzer exklusive Rabatte und Angebote finden kann.
• Zuerst müssen Sie eine iOS-Version erstellen und dann die Android-Unterstützung hinzufügen.
• Webbasierte Anwendung für den Administrator, mit der Sie die in der React Native-Anwendung angezeigten Informationen verwalten können. Obwohl ich hier hauptsächlich über die Front-End-Entwicklung sprechen werde, halte ich es für angebracht zu erwähnen, dass der Serverteil der Anwendung für Administratoren auf Ruby on Rails, Postgres und Heroku basiert.

Möglicherweise stellen Sie fest, dass dieses Projekt eher bescheidene Anforderungen hat. Vielleicht kann etwas in diesem Sinne als gutes Beispiel für die erste Anwendung bezeichnet werden, die jemand mithilfe neuer Technologien entwickeln wird. Wenn Sie einen Blick auf das werfen möchten, was ich am Ende hatte (und nebenbei entscheiden möchten, ob Sie Zeit damit verbringen möchten, die Geschichte darüber zu lesen, wie genau dies für mich funktioniert hat), finden Sie hier eine Übersicht über die erste Version der Anwendung.


Erste Version der Anwendung

Lesen Sie noch? Großartig, dann lass uns weitermachen.

Von den Besten lernen

Stellen Sie sich vor, Sie hätten Ihren Freunden versprochen, ein Haus für sie zu bauen. Aber Sie wissen nicht, wie es geht. Sie wissen wirklich nicht einmal, wo Sie anfangen sollen. Was ist in einer solchen Situation zuerst zu tun? Die Antwort liegt auf der Hand: Finden Sie jemanden, der Häuser bauen und von ihm lernen kann.

Genau genommen habe ich genau das versucht. Und ich hatte großes Glück, genau das zu finden, was Sie brauchen. Nach nur wenigen Stunden der Suche nach React Native-Schulungsmaterialien fand ich auf YouTube einen 13-teiligen Harvard React Native-Videokurs. Jede 90-120-minütige Vorlesung war einem eigenen Thema gewidmet. Infolgedessen war ich mit ungefähr 23 Stunden hochwertiger Schulungsunterlagen konfrontiert.

Nachdem ich diesen Kurs gefunden hatte, machte ich mich sofort wie ein Besessener an die Arbeit. Nach einigen Wochen Unterricht, an denen ich Abende und Wochenenden verbringen konnte, beendete ich diesen Kurs und schuf eine gute Grundlage für die Bewerbung.

Jetzt kann ich sagen, dass dieser Kurs ohne Zweifel der beste ist, den ich gefunden habe. Prägnante und gut vorbereitete Klassen spielten natürlich eine große positive Rolle in der Schule, aber ich kann die Fähigkeiten des Lehrers nur bemerken. Ich würde den Stil der Durchführung dieser Kurse mit den folgenden Worten beschreiben: Geschwindigkeit, extreme Praktikabilität, Konzentration. Kein Wasser, keine irrelevanten Witze oder Geschichten aus dem Leben. Im Gegensatz zu dem, was dein bescheidener Diener hier schreibt ...

Auf die eine oder andere Weise hatte man das Gefühl, dass in jeder Vorlesung so viele nützliche Informationen enthalten waren, dass es doppelt so lange dauern würde, sie vielen anderen Lehrern vorzustellen. Mit anderen Worten, dieser Kurs ist dem bekannten Harvard CS50 sehr ähnlich.

Wenn Sie also für Ihre erste React Native-Anwendung Fuß fassen möchten, empfehle ich diesen Kurs auf jeden Fall. Obwohl hier ein Merkmal zu beachten ist. Dieser Kurs verwendet das Expo- Toolkit. Dies ist ein hervorragendes Tool, das für die meisten einfachen Anwendungen geeignet ist und alle möglichen Feinheiten in Bezug auf die Arbeit mit mobilen Plattformen übernimmt. Wenn Sie jedoch wie ich die Grundlage für ein Projekt schaffen möchten, das eher früher als später zu einer ziemlich großen und komplexen Anwendung werden kann, und gleichzeitig vollständige Handlungsfreiheit wünschen, sollten Sie das Projekt wahrscheinlich besser initialisieren Native reagieren.

Die zweite „Schulungsressource“, die ich nutzen konnte, waren meine Kollegen. Glücklicherweise begann die Firma, in der ich arbeitete, auch mit der Entwicklung des React Native-Projekts. Obwohl ich selbst nicht an diesem Projekt beteiligt war, habe ich viel gelernt, nur mit denen gesprochen, die an diesem Projekt gearbeitet haben, und ihren Code analysiert.

Nachdem wir alles besprochen haben, was mit der Entwicklung von React Native-Anwendungen verbunden ist, ist es an der Zeit, uns technischen Fragen zuzuwenden.

Entwicklungsumgebung

Nachdem ich ein Team des Formulars " react-native init MyApp , erstellte ich die Basis der Anwendung. Eine der ersten Aufgaben, mit denen ich konfrontiert war, war die Entwicklung einer neuen Entwicklungsumgebung.

Wenn Sie von der üblichen Webentwicklung zur React Native-Umgebung gekommen sind, sollten Sie beachten, dass Ihnen hier vieles bekannt vorkommt. Für mich bedeutete dies, dass ich weiterhin Atom als Code-Editor, iTerm als Terminal und GitUp als Schnittstelle für die Arbeit mit Git verwendete. (Wenn Vim-Fans dies gerade lesen, schlage ich vor, dass alle nicht überzeugt sind.) Zusätzlich zu den oben genannten Tools benötigte ich jedoch noch etwas anderes, um React Native-Anwendungen zu entwickeln.

Zum Beispiel musste ich mich an den iOS-Emulator gewöhnen. Während die Ausführung des react-native run-ios Befehls react-native run-ios Befehlszeilentools täuschend einfach erscheint, reichte es zu Beginn eines einfachen Aufrufs dieses Befehls nicht aus, dass der Emulator ordnungsgemäß funktionierte. Da dem Projekt fast täglich neue npm-Pakete hinzugefügt wurden (und später - und einige native CocoaPod-Module), musste ich mich, viel näher als ich möchte, mit dem unangenehmen Ritual vertraut machen, Watchman-Ressourcen und den Haste-Cache zu bereinigen und den Ordner node_modules zu löschen Module neu installieren und Metro Bundler-Cache zurücksetzen. Glücklicherweise können alle diese Aufgaben mit dem folgenden Befehl gelöst werden:

 watchman watch-del-all && rm -rf tmp/haste-map-react-native-packager && rm -rf node_modules && yarn && npm start --reset-cache 

In 9 von 10 Fällen ermöglichte ein solcher "Tanz mit einem Tamburin" dem Emulator, zum Leben zurückzukehren. Manchmal reichte dies jedoch nicht aus. Dann musste ich mich mit der Beschreibung von Fehlermeldungen auf GitHub befassen und die Diskussionen auf StackOverflow lesen.

Die Wurzel einiger anderer Probleme war die Tatsache, dass ich lange Zeit dachte, dass es notwendig sei, Xcode auszuführen, um einige Probleme zu lösen. Und glauben Sie mir, Sie werden sich bemühen, so wenig Zeit wie möglich in dieser Horrorhaus-IDE zu bleiben.

Eine ähnliche Geschichte war mit dem Start des Emulators mit einer bestimmten Version des iPhone. Wenn mir jemand früher gesagt hätte, dass der folgende Befehl dieses Problem direkt über die Befehlszeile löst, hätte ich in meinen ersten Monaten der React-Entwicklung möglicherweise etwas einfacher gelebt.

 react-native run-ios --simulator='iPhone X' 

Weitere Beispiele für die Schwierigkeiten, sich an die neue Entwicklungsumgebung zu gewöhnen, sind der dreistufige Prozess der Vorbereitung der Release-Version der Anwendung (für die Platzierung im App Store oder in einer kontinuierlichen Integrationsumgebung wie Visual Studio App Center oder Firebase) und der Übergang von der Release-Version zur Version. zum Debuggen vorgesehen (in den Entwicklungsmodus). Vielleicht werden viele es offensichtlich finden, dass die notwendigen Änderungen am Projekt mit jedem Texteditor vorgenommen werden können. In jedem Fall ist dies nur ein Beispiel für ein paar kleine Dinge, die einen unerwartet großen Einfluss auf meinen Workflow hatten, wenn ich im Entwicklungsmodus arbeitete.

Und schließlich dauerte es einige Zeit, bis ich mich daran gewöhnt hatte, ständig zwischen den verschiedenen MacOS-Anwendungen zu wechseln, die zur Lösung der Aufgaben erforderlich sind, die ich bei der Entwicklung von Webanwendungen normalerweise nur mit Chrome gelöst habe.

Um zu sehen, was der JavaScript-Code in die Konsole schreibt, und zu Debugging-Zwecken die HTML / CSS-Ausgabe zu analysieren, habe ich mich an den React Native Debugger gewandt. Um den Status der Anwendung, die übermittelten Aktionen, die API-Anforderungen und die empfangenen Antworten zu überwachen, habe ich Reactotron verwendet . Obwohl ich beide Anwendungen als äußerst nützlich empfand, musste ich über meinen üblichen Workflow nachdenken, der zum Erstellen von Ember.js-Anwendungen verwendet wurde, wenn ich alle diese Aufgaben in derselben Umgebung lösen konnte, in der meine Anwendungen ausgeführt wurden (mithilfe des Plugins) Ember Inspector für Chrome).

Navigation

Das Organisieren von Navigation / Routing scheint für React Native eine sehr schwierige Aufgabe zu sein. Während der Existenz dieses Frameworks sind viele verschiedene Lösungen für dieses Problem aufgetreten, aber es gibt immer noch etwas, das als allgemein anerkannter Standard bezeichnet werden könnte. Ich entschied mich für die React-Navigation-Bibliothek. Meine Wahl wurde hauptsächlich durch die Tatsache beeinflusst, dass sie im React Native-Kurs, den ich durchlief, über diese Bibliothek sprachen, sowie durch die Tatsache, dass meine Kollegen sie verwendeten.

Wenn ich etwas Zeit in eine ausreichend gründliche Untersuchung dieses Themas investieren würde, könnte ich Folgendes herausfinden:

• Das React-Navigation- Projekt hat ungefähr 15.000 Sterne auf GitHub und 86 ungelöste Probleme. Es basiert vollständig auf JavaScript und bietet die detaillierteste Dokumentation unter den Navigationslösungen, die ich gesehen habe.
• Die reaktionsnative Navigationsbibliothek erzielte etwa 10.000 Sterne und stellte 162 ungelöste Probleme fest. Es wird jedoch nicht nur JavaScript verwendet. Um damit zu arbeiten, müssen Sie native Dateien bearbeiten.
• Das React-Router- Repository besitzt ungefähr 35.000 Sterne und eine Liste von 55 ausstehenden Problemen auf GitHub. Diese Indikatoren können zwar nicht direkt mit den anderen hier beschriebenen Projekten verglichen werden, da dieses Repository Pakete enthält, die nicht nur für React Native, sondern auch für React entwickelt wurden.
• Das native Navigationsprojekt hat ungefähr 3.000 Sterne und 55 ungelöste Probleme. Diejenigen, die es studieren und verwenden möchten, sollten berücksichtigen, dass es sich noch in einer Beta-Version befindet, dass es nicht nur JavaScript verwendet und dass Airbnb an seiner Unterstützung beteiligt ist (dieses Unternehmen hat beschlossen, React Native aufzugeben )

Aber selbst unter Berücksichtigung des oben Gesagten hätte ich mich wahrscheinlich trotzdem für die Reaktionsnavigation entschieden, da ich keine Zeit hatte, alle diese Bibliotheken auszuprobieren, wie es beispielsweise der Autor dieses Berichts tat. Und schließlich, wie in diesem Bericht gesagt wurde, ist die Wahl eines Tools zur Organisation der Navigation eine Frage, deren Lösung nicht davon abhängt, welches dieser Tools als das beste bezeichnet werden kann, sondern welches davon für die Anforderungen eines bestimmten Projekts am besten geeignet ist.

Nachdem ich ungefähr 9 Monate mit React-Navigation gearbeitet habe, muss ich sagen, dass ich wirklich nichts zu beanstanden habe. Wenn Sie diese Bibliothek mit der bekannten Bibliothek router.js vergleichen, die in Ember.js verwendet wird, kann ich sagen, dass dies etwas völlig Neues ist.

Es war wirklich einfach für mich, mit den drei Haupttypen von Navigationswerkzeugen für die Reaktionsnavigation umzugehen. Dies sind StackNavigator , TabNavigator und DrawerNavigator . Es war viel schwieriger zu verstehen, wie diese Tools kombiniert werden müssen, um das von mir benötigte Anwendungsnavigationssystem zu erstellen.

Zum Beispiel war die Tatsache, dass die DrawerNavigator Komponente das DrawerNavigator des Navigationssystems sein sollte (ein Schritt über der Hauptkomponente von TabNavigation ), für mich völlig offensichtlich. Wenn es schwer vorstellbar ist, sieht DrawerNavigator so in Aktion aus (in einer realen Anwendung funktioniert alles viel reibungsloser).


DrawerNavigator aus der Reaktionsnavigation in Aktion

Wie Sie sehen können, musste ich die seitliche Navigationsleiste mit einem Wisch öffnen, da sie sich auf einem beliebigen Anwendungsbildschirm befand.

Ich habe die Seitenleiste im Vergleich zur Hauptnavigationsleiste am unteren Rand der Anwendung als zweitrangig empfunden. Daher schien es mir, dass DrawerNavigator im Routenbaum (siehe unten) entweder unter dem Haupt- BottomTabNavigator oder auf derselben Ebene wie dieses Element platziert werden sollte.

Nachdem ich jedoch viel gelitten hatte und versucht hatte, die Seitenleiste an die Stelle zu zwingen, an der sie sich als unangemessen herausstellte, wurde mir klar, dass DrawerNavigator gemäß den Funktionen der Reaktionsnavigation einen Schritt über dem BottomTabNavigator , d. BottomTabNavigator In Wurzel des Navigationsbaums. Ich hoffe, dieser Fund hilft einem der Leser dieses Materials, Zeit zu sparen, die sonst für das Lesen von Dokumentationen und Materialien auf GitHub aufgewendet würde.

So sieht der App-Navigationsbaum aus. Hier wird als MainDraverNavigation verwendet.


Der endgültige Navigationsbaum der ersten Version der Anwendung

Hier fragen Sie sich vielleicht, warum Sie für die Community- und Konferenzabschnitte sowohl StackNavigator als auch TabNavigator . Können Sie nicht einfach die StackNavigator Ebene StackNavigator und direkt zu TabNavigator ?

Die Sache ist, ich brauchte jedes der beiden TabNavigator Elemente, um einen Titel zu haben. Hier sind sie.


TabNavigator, Titel

Auch hier stimmten meine Vermutungen nicht mit dem Reaktionsnavigationsgerät überein. Ich dachte, dass MaterialTopTabNavigator eine völlig normale Navigationskomponente sein sollte, daher entschied ich, dass es in seinen Einstellungen eine integrierte Option geben sollte, mit der Sie einen Titel festlegen können. Wie sich herausstellte, war nichts dergleichen vorhanden, und deshalb musste ich StackNavigator als Zwischenschicht verwenden, um der Anwendungsinfrastruktur eine zusätzliche Komplexität zu StackNavigator und mich von ziemlich „kosmetischen“ Überlegungen leiten zu lassen.

Dieser Mangel an Reaktionsnavigation verursachte mir außerdem viel ernstere Probleme. Sie bestanden insbesondere in der Notwendigkeit, das Falten und Verschwinden des Header-Bildes während des Bildlaufs des Benutzers durch die von FlatList organisierte Liste der Elemente zu organisieren. Da die Titel der Abschnitte "Startseite" und "Auswahl" im selben StackNavigator wie die Listen ihrer Elemente angezeigt wurden, ist dieses Problem nicht schwer zu lösen, indem der Titel einfach zusammen mit dem Rest der Liste StackNavigator .

Im Fall der Community- und Konferenzabschnitte konnte ich jedoch keine Möglichkeit finden, dieselbe Lösung anzuwenden, da die Header mithilfe der StackNavigator Elemente und die Listen mithilfe der StackNavigator Elemente einen Schritt höher in der Navigationsstruktur angezeigt werden. Infolgedessen weigerte ich mich, den Titel zu scrollen, was zu einer unangenehmen Heterogenität in der Anwendung führte.


Scrollen in TabNavigator und StackNavigator

Obwohl das beschriebene Problem mit dem Titel im Emulator, der das Iphone X simuliert, nicht ernst zu sein scheint, kann der Titel auf dem kleinen Bildschirm etwa 20% des verfügbaren Bildschirmplatzes einnehmen. Wenn jemand weiß, wie man dieses Problem löst, lass es mich wissen.

Das gleiche Problem mit TabNavigator wurde auch im Abschnitt Ziel TabNavigator . Wie in der folgenden Abbildung rechts gezeigt, wollte ich ein weiteres TabNavigator Element auf der Registerkarte Coworking Spaces platzieren, um die drei obersten Registerkarten Info, Mitglieder und Kontakt anzuzeigen.

Bei der Arbeit mit TabNavigator es schwierig, eine Diashow oben im Element zu platzieren, ohne die Entscheidung zu erschweren und nicht viele Navigationsprobleme zu verursachen (hauptsächlich im Zusammenhang mit Navigationsoptionen). Ich musste also auf ein JS-Paket namens React-Native-Swiper zurückgreifen , um mit diesen drei Registerkarten arbeiten zu können. Es sollte beachtet werden, dass diese Lösung völlig zu mir passen würde, wenn ihre Anwendung nicht zu einer abrupten Animation von Linien führen würde, die die Registerkartenüberschriften betonen. In jedem Fall hielt ich diesen Nachteil für eine faire Bezahlung für die Möglichkeit, Probleme mit einem alternativen Navigationssystem zu vermeiden.


Vergleichen Sie TabNavigator aus der React-Navigation mit React-Native-Swiper (beachten Sie den Unterschied in der Animation der goldenen Linien unter den Tab-Namen).

Hier sind die Schlussfolgerungen, die ich nach der Implementierung des Anwendungsnavigationssubsystems gezogen habe:

• Es gibt viele gut dokumentierte Lösungen für die Organisation der Navigation in React Native-Anwendungen, unter denen ich React-Navigation gewählt habe. Es passt am besten zu meinen Bedürfnissen.
• Die React-Navigation-Bibliothek vereinfacht den Beginn der Arbeit an einem Projekt erheblich, wenn der Entwickler nicht viel über die Funktionsweise der Navigationssysteme mobiler Plattformen weiß.
• Die React-Navigation-Bibliothek verfügt über einige Funktionen, die nicht intuitiv sind (zumindest für einen Webentwickler), aber es gibt nichts, was nicht umgangen werden kann, wenn auch nicht auf die effizienteste Weise.

Begrüßungsbildschirm

Wenn Sie eine neue Anwendung im Emulator starten, die mit dem Befehl react-native init , und diese ständig neu laden, während Sie Änderungen daran vornehmen, stellen Sie sehr schnell fest, dass die Anwendung einen schönen Begrüßungsbildschirm benötigt (sie werden auch als "Begrüßungsbildschirme" bezeichnet).

Wie man einen Begrüßungsbildschirm erstellt, ist hier gut geschrieben, daher werde ich die Worte des Autors dieses Materials nicht wiederholen. Ich werde nur über das Problem sprechen, auf das ich gestoßen bin und über das in diesem Handbuch nichts steht. So sieht dieses Problem aus:


Der Begrüßungsbildschirm mit einem Problem

Dieses Problem tritt in seltenen Fällen unter iOS auf, aber einige Benutzer der Anwendung werden wahrscheinlich darauf stoßen. Ich habe dieses Problem zum ersten Mal entdeckt, als ich an einem Ort gearbeitet habe, an dem ich kein WLAN nutzen konnte, und meinen Laptop über ein Telefon mit dem 4G-Internet verbunden habe. IPhone-Benutzer wissen, dass beim Verteilen des Internets durch das Telefon die Statusleiste blau wird und höher wird. Dies hat das Bild auf meinem Begrüßungsbildschirm "gebrochen", als ich die Anwendung auf dem Telefon gestartet habe. Das gleiche Problem trat beim Anruf auf.

Nachdem ich einige Zeit im Reactive-Native-Splash-Screen- Repository gestöbert und dort nichts Nützliches gefunden hatte, beschloss ich, dieses Problem zu umgehen, indem ich die Statusleiste vollständig ausblendete, während der Begrüßungsbildschirm angezeigt wurde.

Es ist sehr einfach: UIStatusBarHidden einfach den Schlüssel UIStatusBarHidden , UIStatusBarHidden ihm den logischen Wert true , und setzen Sie nach dem Aufrufen von SplashScreen.hide() die Eigenschaft StatusBar Komponente React Native StatusBar auf StatusBar .

Staatsverwaltung

Ich habe das Gefühl, dass ich in den letzten zwei Jahren jeden Tag von der Priorität der Vereinbarung gegenüber der Konfiguration, dem Prinzip der Konvention über die Konfiguration (CoC), gehört habe. So war es bei meinem vorherigen Job. Und das ist nicht überraschend, da wir dort auf dem Server Ruby on Rails und auf dem Client - Ember.js - zwei Frameworks verwendet haben, deren Kern perfekt zum CoC-Prinzip passt. Ich dachte, ich wüsste, was das bedeutet, aber der Prozess der Erforschung des Staatsmanagements in React Native gab mir ein völlig neues Verständnis dieses Prinzips.

Obwohl ich in mehreren sehr einfachen Anwendungen mit der von diesem Prinzip beeinflussten React-Bibliothek experimentiert habe, habe ich nie etwas erstellt, das groß genug ist, um die Vorteile der Verwendung von Statuscontainern wie Redux oder MobX zu erkennen . Die meiste Erfahrung in der Verwaltung des Status von JS-Anwendungen habe ich mit Ember Data gemacht (dies ist das in Ember integrierte System zum Verwalten des Status und zum Organisieren der dauerhaften Datenspeicherung).

Da mir die Redux-Bibliothek als eine der besten Lösungen für das State-Management-Problem erschien, von dem ich seit vielen Jahren gehört hatte (und das in dem von mir behandelten React Native-Kurs besprochen wurde), habe ich mich im Allgemeinen nicht an die Konkurrenten gewandt . Ich wollte meine Anwendung nur mit den besten vorhandenen staatlichen Managementsystemen ausstatten und dies ohne allzu großen Aufwand tun.

In Ember befinden sich 90% der Dateninfrastruktur in den Händen des Programmierers. Ich hatte nicht den Verdacht, dass in meinem aktuellen Projekt alles genau umgekehrt sein wird. Wie sich herausstellte, bietet nicht nur React, sondern auch Redux, die beliebteste Zustandsverwaltungsbibliothek, nichts Nützliches für die Aufrechterhaltung des globalen Zustands. Diese Bibliothek ist so leicht, dass der Programmierer 90% der Sorgen über die Arbeit mit Daten in der Anwendung übernehmen muss, um ein anständiges Statusverwaltungssystem zu erstellen.

Nachdem ich, ein weitaus weniger erfahrener Entwickler als jetzt, herausgefunden hatte, war es für mich am schwierigsten, mich an die neuen Funktionen und die Prinzipien der Immunität zu gewöhnen. Nachdem ich die überraschend große Menge an Arbeit in Kauf genommen hatte, die erledigt werden musste, um einfach Daten vom Server herunterzuladen oder an den Server zu senden, kam dies alles in Form von 7 ziemlich einfachen Schritten zusammen:

1. Fügen Sie der Datei drei Konstanten mit Konstanten hinzu: SOME_ACTION_REQUEST , SOME_ACTION_FAILED , SOME_ACTION_SUCCEEDED .
2. Aktionsersteller zur Aktionsdatei hinzufügen.
3. Verarbeiten Sie drei Aktionen in einem geeigneten Reduzierer und fügen Sie dem System bei Bedarf einen neuen Reduzierer hinzu und fügen Sie ihn dem Wurzelreduzierer hinzu.
4. Fügen Sie einer geeigneten Saga Worker hinzu, und fügen Sie dem System bei Bedarf eine neue Saga hinzu und fügen Sie sie in die Root-Saga ein (ich verwende die Redux-Saga- Bibliothek, um asynchrone Aktionen zu verarbeiten).
5. Fügen Sie eine Funktion hinzu, um mögliche API-Anforderungen zu verarbeiten.
6. Ordnen Sie die erforderlichen Daten vom Status den Eigenschaften in der entsprechenden React-Komponente zu.
7. SOME_ACTION_REQUEST Aktion SOME_ACTION_REQUEST von der entsprechenden React-Komponente.

Redux und Redux-Saga haben natürlich viel umfangreichere Funktionen, aber wenn man bedenkt, woran ich gerade interessiert bin, sind die oben genannten 7 Schritte das, was Redux für mich ist.

Sitzungen

Also haben wir die Entwicklungsumgebung für React Native-Anwendungen eingerichtet, einen Navigationsbaum erstellt und die State-Management-Infrastruktur vorbereitet. Was ist im nächsten Schritt des Projekts gut zu tun? Für mich war die Schaffung eines Benutzerauthentifizierungssystems eine ganz natürliche Antwort auf diese Frage. Jetzt sprechen wir über Sitzungen.

Wenn Sie von der Webentwicklung in die Sphäre von React Native gekommen sind, werden Sie sich ohne große Schwierigkeiten mit Sitzungen befassen. Wenn Sie mit den Konzepten, auf denen der LocalStorage- Speicher basiert , ein wenig vertraut sind, müssen Sie nur wissen, dass bei der Arbeit mit React Native der Zugriff auf diesen Speicher durch einen Aufruf von AsyncStorage ersetzt werden sollte . Dies ist die Abstraktionsebene, mit der Sie Daten zwischen Sitzungen im Schlüsselwertformat speichern können. Mit anderen Worten, hier können Sie das auf dem Server generierte Authentifizierungstoken speichern, das an den Client übertragen wird, nachdem sich der Benutzer erfolgreich beim System angemeldet hat.

Listen

Wenn wir über das Arbeiten mit Listen sprechen, hatte ich das Gefühl, dass dieses Problem in React Native recht gut gelöst wurde. Im Allgemeinen kann festgestellt werden, dass der Entwickler drei Möglichkeiten hat. Wenn es mit statischen Listen funktioniert, deren Daten sich nicht ändern, wird ScrollView höchstwahrscheinlich genug davon haben. , , , , FlatList . , , , , SectionList .

, , FlatList . , , , , , . .

▍

FlatList , refreshControl . , , , , . , React Native , . — RefreshControl . , .


RefreshControl

, , , refreshControl , RefreshControl , , . , , :

• , , . , handleRefresh() .
• , , « » ( ).

— .

, , , , . , , , GitHub.

, refreshControl onEndReached ( ) fetching . , - , false true , — , , 250 , RefreshControl , .

, setTimeout() fetching 350 . . , , setTimeout — , , handleRefresh() handleLoadMore() — refreshing loadingMore . , , , , - .

, onRefresh refreshing refreshControl . , refreshControl , , , , .

▍

, . — , , Load More , , , , .


FlatList. , , 2, onEndReached , 2-

, onEndReached . .

onEndReachedThreshold , FlatList , , onEndReached . .

100 , , 10 , 1, onEndReachedThreshold , , onEndReached , , 90-. 2, , 2- , — 80- , .

, , , , FlatList . , , , , handleLoadMore() , onEndReached , , — 10 .

, , loadingMore , , handleLoadMore() , , , !loadingMore . , , .

▍

ListLoadingComponent FlatList , , ListHeaderComponent , ListEmptyComponent ListFooterComponent , , - , , , .

, render() .

▍

, , , . , , .

, scrollToOffset FlatList , , . , . ref FlatList :

 <FlatList ref={(ref) => { this.newsListRef = ref; }} ... /> 

, . ScrollToOffset handleScrollToTop() , , , react-navigation, , :

 componentDidMount() { this.props.navigation.setParams({   scrollToTop: this.handleScrollToTop, }); } handleScrollToTop = () => { this.newsListRef.ScrollToOffset({   x: 0, y: 0, animated: true, }); }; 

, react-navigation 3 ref , BottomTabNavigator .

, , . , , 4G- ( , , 3G), , , , , .

, , , , , , , . . , , , , .

, , . 7 , image , , ( , ).

▍

, , . react-native-image-picker , Cloudinary Carrierwawe Rails-.

, Node-API Cloudinary react-native-fetch-blob . , , , , , .

, , react-native-fetch-blob, . , react-native-fetch-blob , API JS FormData . , react-native-fetch-blob rn-fetch-blob , .

▍

, React Native Image style , source resizeMode . , , - , , , .

, , , . , , , . . Avatar react-native-elements.

, Image . , - , .

, , . .


react-native-slideshow

react-native-slideshow , , . , , , , , , .

▍

7 , , . , — , , . , - . .

, , -, , , , - ( — ), , , , Facebook . , .

, , React Native-. , . — react-native-loading-placeholder , , , . — react-native-linear-gradient , . , , , , , , , , .


react-native-loading-placeholder react-native-linear-gradient

▍

— . , React Native Image . , - CachedImage react-native-cached-image .

npm- Image , , , CachedImage . Reactotron , , .

, , , . , , Cloudinary, 95% , , 4%. .

, . CachedImage activityIndicatorProps={{ animating: false }} , .

▍

React Native - Picker . - , ( - ), JS-, . , react-native-picker-select , <select> iOS Android .

JS-, React Native- ( lodash , ), , , , . , , - . , .

▍

react-native-calendars Wix. :

• iOS , . , , , -, — .
• React Native — DatePickerIOS DatePickerAndroid , , .
• , , , Apple Google.

, . , , — .


react-native-calendars react-native-picker-select

▍

— , .
SaaS-, . SOAP, API Conference. , , , , .

, , , 5 . - , JavaScript Date UTC, , . , , , , , - . « », — .

, , moment-js , React Native, timezone , :

 const timeSthlmAfterFive = moment().isAfter(moment.tz('17:00:00', 'HH:mm:ss', 'Europe/Stockholm'), 'second'); 

, , , . React Native -, , , , , , font-face CSS.

. , . , 10 -. react-native-vector-icons .

, ,

CI/CD, DevOps- -, .

( ) , - . , . GitHub- . , :

• . , , .
• , - , , .

. , , , , , , push-. , , , , .

Visual Studio App Center (VSAC). Chain React 2017 . , , , DevOps-, . , , , , push-, Codepush . -. , , , , iOS, Android. , - , , , , , - .


Visual Studio App Center ( )

« », — , . , (API — ). , , , , -, (, , ).

? Microsoft, , VSAC « ». , , Codepush ( React Native-) HockeyApp ( ), - . , «developers, developers, developers, developers» .

, VSAC , - Fastlane , BuddyBuild Firebase ? , , , VSAC , , , . , , ? , VSAC, , .

VSAC. , , , .

, , , VSAC Apple Developers (Apple, , , ). , , , .

, VSAC, , , CI/CD- .

Android

, iOS- , Android . Android Studio Android React Native Platform . , Platform.select() . - , , , Platform.OS .

, , Google Play , App Store. Warum? , App Store Apple.

Apple

, -, React Native, . , Apple. , , , , , .


Apple

, — « ». -, , iOS-, , , , .

— Apple. , , , . Dun & Bradstreet, Apple, . , , , Apple (, , Apple , — ).

, Apple , , — , -. . , — ?

, .

, , Apple Developer . .

. . provisioning-, iOS-, , Apple .p12 push-, dSym-. , , , .

Apple, 50% 24 , 90% — 48 . , , — , , Apple-.

, . «Metadata Rejected». , - . , 5 ( App Store Review Guidelines ), .

, , , — . , , , , , . , — , () .

iOS, . , , , . , , . . , , .

Zusammenfassung

, React Native- . React Native-. -. , : . .

, , , , . , , — , .

, - , . . , , , 8 . . .

, . , , - .

, , , 6-7 , . , , , :

• , (iOS Android), , , .
• JavaScript. , , Ember.js.
• React.js, , React-, . , JS-/.
• , Redux.
• DevOps .
• , .
• UI/UX.
• , , , , , , , , .

JS- , Flutter , NativeScript , Objective-C, Swift, Java Kotlin, React Native .

, -, , React Native , , , . , React Native — , . React Native .

Liebe Leser! ?