In einem
früheren Artikel habe ich ausführlich über unsere Erfahrungen bei der Erstellung eines Webdienstes / einer mobilen Anwendung zur Führung eines persönlichen Tagebuchs gesprochen. Die aktuelle Version der Anwendung (die minimal funktionsfähige Version ist bereits bei Google Play verfügbar) wird in React Native entwickelt, und hier werden wir uns heute ausführlich damit befassen.
Wir sprechen über unsere eigenen Erfahrungen mit dem Framework, Möglichkeiten zur Erweiterung der Funktionalität, „Fallstricke“ (wo bist du ohne sie!) Und wie wir sie umgangen haben.
Über das gesamte Framework
Ein wenig über den Helden des Anlasses -
React Native . Er ist immer noch gut!
Für diejenigen, die JavaScript genug kennen und insbesondere NodeJS - es ist sehr gut. Wenn Sie Erfahrung mit React haben, oder zumindest ein Verständnis für dessen Idee, Mechanismus haben - es ist einfach großartig!
Die Hauptsache ist, dass die Ausgabe eine wirklich native Anwendung ist. Erweiterungen und Plugins decken fast 99% der typischen Aufgaben ab. Der verbleibende Prozentsatz bei dringendem Bedarf kann in den Muttersprachen (Java, Objekt-c) hinzugefügt und mit der React Native-Anwendung verbunden werden.
Aber genug über die Profis, sie nützen ihnen nichts, obwohl die Liste beeindruckend sein wird. Alle Goodies und Goodies sind bedeutungslos, wenn die Anwendung nicht gestartet wird, und dies ist das erste, was wir mit React Native "zufrieden" haben.
Anfangs mochte er die Version von NodeJS nicht. Dann die npm-Version. Dann die Version des Android SDK, dann die Version der Android-Tools, dann ... Es macht keinen Sinn, schriftlich darüber zu schreiben, wie alle Probleme gelöst wurden, da von diesem Moment an die gesamte oben genannte Software ihre Versionen aktualisiert hat und die Anweisungen irrelevant sind.
Beachten Sie jedoch, dass der Engpass bei React Native die Build-Umgebung ist. Machen Sie sich bereit für Google Learning, das Lesen von Foren und den Stackoverflow. Infolgedessen haben wir für die Bereitstellung aufgewendet: Ubuntu - 3 Tage, Win10 - 2 Tage. So seltsam es auch scheinen mag, unter Windows stellte sich heraus, dass alles einfacher war, oder einfach unter Ubuntu. Sie haben die Zapfen losgeworden und bereits verstanden, was und wo sie abnehmen sollten.
Beachten Sie, dass sich plötzlich jemand als nützlich erweist: Der unten dargestellte Code löste alle Probleme mit der Kompatibilität von SDK-Versionen von Add-Ons beim Kompilieren des Projekts.
subprojects { afterEvaluate {project -> if (project.hasProperty("android")) { android { compileSdkVersion 26 buildToolsVersion '26.0.3' } } } }
Es wird ganz am Ende in die Datei /android/build.gradle geschrieben. Ohne diese „Direktive“ versuchten anscheinend alle Plugins / Erweiterungen, nach ihren eigenen Versionen des Android SDK zu kompilieren, was zur Zusammenstellung des Projekts in einer chaotischen Zusammenstellung heftiger Fehler und böser Warnungen führte. Niemand weiß, wie relevant die Empfehlung in Zukunft sein wird. Aber heute, insbesondere nachdem Google die Verwendung von SDKs unterhalb der 26. Revision für die Kompilierung zwangsweise verboten hat, hilft dies sehr.
Der zweite Engpass - der Schmerz ist weniger React Native als anscheinend die gesamte Open Source als Ganzes - begrenzte Unterstützung. Die Repositories haben Tonnen von ungelösten Problemen. Heftige "intelligente" Bots schließen Fehler, wenn keine Aktivität vorliegt, manchmal sogar nach 7 Tagen ... Und alles scheint in Ordnung zu sein. Niemand schuldet jemandem etwas. Jeder ist daran gewöhnt.
Geduld schnappte, als beim banalen Eingeben von Text in einen regulären TextInput eine "Überhöhung" entdeckt wurde. Nur ein Textfeld. Nur Texteingabe über die Bildschirmtastatur. Nach ein paar Minuten Drucken beginnen die schrecklichen Verzögerungen und Bremsen des Systems. Wir haben uns beeilt, nach einem Problem zu suchen - ja, es gibt eines, es begann mit der Version RN 5x.xx Lösen Sie das Problem? Nein. Zwei oder drei Themen zum Thema werden einfach geschlossen. Ein paar mehr verschmolzen zu
einem großen .
Ich musste hinein graben, es herausfinden, verschiedene Optionen ausprobieren, die Versionen von RN ändern, in der Hoffnung, dass es dort keinen Pfosten gab. Infolgedessen war es experimentell möglich, Leistungslücken zu minimieren - sie entfernten alle Formatierungen vollständig und schrieben den Eingabehandler neu. Aber der unangenehme Rückstand blieb. Das Problem mit den Entwicklern des Frameworks ist übrigens noch nicht gelöst, sechs Monate sind vergangen ...
Datenbank
Realm ist eine schnelle Datenbank mit beeindruckender Funktionalität, die unter Android, IOS und Windows funktioniert.
Zuerst gab es ein zweifaches Gefühl, sie sagen, es gibt kein ORM für dich, es gibt wirklich kein SQL, die Aufnahme ist nur innerhalb des Rückrufs. Ungewöhnlich und seltsam, besonders für einen Webentwickler aus PHP, der mit ActiveRecord und Doctrine aufgewachsen ist. Tatsächlich erwies sich die Erstellung eines minimalen Satzes von Funktionen für CRUD als recht einfach und schnell. Und alle Fragen des Geschmacks und der Gewohnheiten wurden gelöst, indem die offiziellen Informationen kurz, prägnant und verständlich gelesen wurden.
Und dann begann überhaupt das Geschenkkarussell:
- Datenverschlüsselung, sofort einsatzbereit
- Faules Laden von Daten (zieht nur das aus der Datenbank, was gerade benötigt wird)
- Echte Beziehungen zwischen Entitäten (hi mongo!
- Versionierung der Datenbankstruktur mit Migrationen - sofort einsatzbereit
- Und ein paar kleine, aber nette kleine Dinge.
Es schien, dass das Problem mit der Datenbank vollständig geschlossen war. Wir arbeiten! Der Fall wurde diskutiert, bis sie die Suche erreichten. Eher zur Volltextsuche. Genauer gesagt, zur Volltextsuche in russischer Sprache, ohne zwischen Groß- und Kleinschreibung zu unterscheiden. Er hat nicht gearbeitet. Absolut. Auf Englisch - gearbeitet. Groß- und Kleinschreibung hat auch funktioniert. Aber ohne Register, aber auf Russisch - sogar weinen. Nachdem ich die Hilfe, den
Bugtracker und das Internet durchgesehen hatte, stellte sich heraus, dass es für den Entwickler aus technischen Gründen sehr unpraktisch war, über die Unterstützung von Multibyte-Codierungen und alles, was über das lateinische Alphabet hinausgeht, nachzudenken. Nun, er hat es nicht getan. Warum nicht?
Nichts zu tun, ich musste nach einer Problemumgehung suchen. Als Ergebnis eines kurzen Angriffs wurde eine "willensstarke" Entscheidung getroffen - wir machen ein separates Feld "fulltext_index". Darin duplizieren wir den gesamten Text in Großbuchstaben und "schneiden" gleichzeitig unnötige Satzzeichen, unnötige Probleme und alle Arten von Müll aus. Danach ist es logisch anzunehmen, dass wir eine Suche mit erzwungenem Großbuchstaben durchführen.
Sieg! Die Suche funktioniert jetzt wie eine Uhr auf Russisch, sogar auf Englisch!
Insgesamt: Trotz der Probleme mit dem Register arbeitet die Datenbank sehr schnell, der Komfort ist eben, ein Haufen fertiger Chips aus der Box - im Allgemeinen empfehle ich es.
Bildschirmnavigation
wix / react-native-navigation ist ein einfacher und stabiler Navigator (ein Router, wie ein Webprogrammierer sagen würde).
Es wurde nur ausgewählt, weil es alle erforderlichen internen Tests bestanden hat (Öffnen des Bildschirms, Aufrufstapel, Rückgabe, Seitenleiste). Im Allgemeinen ist das Minimum erforderlich Minimum.
Im Gegensatz zur weit verbreiteten
Reaktionsnavigation hat wix eine 100% ige Ursprünglichkeit. So ist es - alle Übergänge zwischen Bildschirmen werden in Java-Anwendungscode übersetzt und funktionieren auf Systemebene.
Während des Entwicklungsprozesses stießen sie auf einen schrecklichen Fehler des „weißen Bildschirms“, der nur in einigen Fällen und auf einzelnen Geräten auftritt. Es kommt vor, dass beim Verlassen des "Schlaf" -Modus der Startvorgang einfach einfriert. Debugger und Debugging sind stumm. Auf Github zu diesem Thema gab es nur seltsame Hinweise auf "... versuche zu spielen" mit der Reihenfolge des Ladens von Bildschirmen und anderer Hexengnade. Es ist nicht einmal klar, auf welcher Ebene das Problem begraben ist: der Java-Code des Android oder bereits in der JavaScript-Maschine. Nachdem wir mit einem Tamburin getanzt hatten, trat der Fehler seltener auf, verschwand jedoch überhaupt nicht und hing in der Liste der ungelösten Probleme. Leider.
Ohne diesen „Pfosten“ ist alles mehr oder weniger erträglich und glatt. Und vor allem einheimisch!
Dateisystem
Im Dateisystem mussten wir benutzerdefinierte Fotos speichern und mit einigen Dateien arbeiten, die sich auf die Sicherung beziehen. Aufgrund der Auswahl aus zwei möglichen Optionen fiel die Auswahl auf
React-Native-Fs
"Zugriff auf das native Dateisystem" - wird am Eingang zum Repository geschrieben. Nun, wahrscheinlich ist es das, aber mit einigen Änderungen und Einschränkungen.
1. Der Zugriff ist nur asynchron. Daher müssen Sie sich manchmal daran erinnern, mit Promise / async / await gearbeitet zu haben. Obwohl Sie in React anfangen, es zu vergessen.
Für die synchrone Ausführung einer asynchronen Funktion (warten) muss die aktuelle Funktion asynchron (asynchron) sein. Fügen Sie dazu einfach asynchron vor dem Funktionsnamen hinzu. Und ja, für die Klassenmethode React.Component funktioniert dies auch. (In der React-Hilfe schweigt ReactNative darüber, obwohl dies an sich impliziert ist).
export default class CloudIndex extends BasePage { async setupBackupFolders(init = false) {
Es ist wichtig zu beachten, dass die Funktion danach auch asynchron wird! Wenn es bereits zuvor verwendet wurde, überprüfen Sie den Aufruf.
2. Der vollständige plattformübergreifende Zugriff ist nur ein Teil des Dateisystems. Im Wesentlichen nur ein Verzeichnis: DocumentDirectoryPath. Und dies ist in der Tat das Verzeichnis, in dem die Anwendung liegt. Vergessen Sie das Scannen des Stammverzeichnisses, das Suchen nach Bildern in der Galerie, Audio usw. Nichts davon ist verfügbar.
Aber im Allgemeinen löst es seine Aufgaben zu 100%. Im Sparschweinmast hev.
Cloud-Zugriff
Die Aufgabe ist sowohl einfach als auch komplex. Einfach, weil jeder eine API hat - nimm sie und benutze sie. Es ist schwierig - ich möchte nicht in die Tiefe gehen, und das Zeitformat erlaubte mir nicht, in „möglicherweise funktionierenden“ Methoden herumzusitzen und herumzustöbern. Wir haben uns entschlossen, etwas zu finden, das zu 100% funktioniert und in einer vorgefertigten Erweiterung für React Native implementiert ist.
Es gab genau einen davon: Google Drive. Die Arbeit mit der Festplatte ist verständlich und wird durch banale API-Anforderungen gesteuert. Der Zugriff der Anwendung auf die Festplatte ist jedoch eine ganz andere Geschichte.
React-native-google-signin -
Google- Autorisierungsverwaltungssystem.
Hier hatten wir „Spaß“. Sie wollten es einfacher und zuverlässiger, aber sie haben ...
Alles begann mit dem Erhalt des Entwicklerschlüssels. Zuvor hat Google dies alles selbst getan. Nach der Übernahme von FireBase wurde beschlossen, diese Funktion auf die wunderbare Konsole zu übertragen.
Um den Schlüssel zu erhalten, benötigen Sie:
- Registrieren Sie die Anwendung in der Google Developer Console, um dort den Zugriff auf den Drive-Dienst zu aktivieren.
- Registrieren Sie die Anwendung auf der Firebase-Konsole.
- Erstellen Sie eine Datei google-services.json in der Firebase-Konsole, in der die Serviceschlüssel geschützt sind.
- Schieben Sie diese Datei mit der installierten Erweiterung react-native-google-signin in das Projekt.
Und dann ja. Etwas beginnt zu funktionieren. Vielmehr beginnen Fehlercodes in Serviceantworten sinnvoll zu werden.
Es ist besonders wichtig zu beachten, dass der API-Schlüssel, den die Anwendung direkt beim Herstellen einer Verbindung zum Dienst erhält, überhaupt nicht ewig ist. Manchmal ändert es sich einmal am Tag, manchmal einmal in der Minute. Überprüfen Sie daher vor dem Zugriff auf den Dienst immer zunächst, ob der aktuelle Schlüssel abgelaufen ist. Und wenn es abgelaufen ist - wieder zu empfangen.
Der Vorgang zum Abrufen des API-Schlüssels von Google ist wie folgt:
await GoogleSignin.hasPlayServices() const userInfo = await GoogleSignin.signIn() this.setState({ userInfo: userInfo, }) settings.set('google.drive.key', userInfo.accessToken) trace('>> Key obtained:', userInfo.accessToken) this.apiKey = userInfo.accessToken
Wenn wir beispielsweise in unserer Anwendung den Sicherungsbildschirm öffnen, versuchen wir, Sicherungsordner von der Google-ID abzurufen. Wenn alles erfolgreich ist, bekommen wir ID.
backupRootID = await Storage.safeCreateFolder({ name: backupFolder, parents: ["root"], }).catch((e)=>{ if(e.status == 401) { trace(' >> Google signin unauthorized', e) signGoogle() return false } else { trace(' >> Google signin failed', e) } })
Wenn nicht (Fehler 401 kam), versuchen wir, einen neuen API-Schlüssel zu erhalten und wiederholen die Anforderung, die ID des Sicherungsordners erneut abzurufen.
Und noch ein paar angenehme Dinge
Arbeiten Sie mit Datum und Uhrzeit
Ehre und Lob
moment.jsDie Bekanntschaft mit diesem Wunder begann vor langer Zeit und es war verdammt schön, dass es in der Umgebung von React Native genauso gut funktioniert.
Eine Reihe von Formaten, Magie + - Tag / Monat / Jahr. Unterstützung für Mehrsprachigkeit und nationale Formate. Schönheit!
Es ist möglich, uns mit Tomaten zu überschütten, was darauf hinweist, dass all dies leicht von Händen mit gewöhnlichem Datum „beherrscht“ werden kann, aber unter Bedingungen einer schnellen Entwicklung ist es NICHT sehr, sehr nützlich, über solche Dinge nachzudenken!
Grafiken und Diagramme
React-Native-Charts-Wrapper - JavaScript-Wrapper für native Android MPAndroidCharts.
Ich mochte das Vorhandensein einer Vielzahl verschiedener Arten von Graphen (obwohl wir zu diesem Zeitpunkt nur zwei davon verwendeten - linear und „pie“).
Verwöhnte den Eindruck durch eine magere, fast fehlende API-Referenz. Der Autor empfiehlt, die Dokumentation der Original-MPAndroidCharts zu lesen. Tatsächlich erwies sich der Rat als schwierig zu implementieren, da letzterer kontinuierlich weiterentwickelt wird und die Implementierung des Wrappers um mehrere Versionen übertrifft. Darüber hinaus ist MPAndroidCharts in Java geschrieben. Vrapper - in JavaScript. Man muss schnell darüber nachdenken, was schwierig ist.
Mehrsprachigkeit und Übersetzungen
Reagiere-native-i18n- arbeite wie ein Zauber, Leute!
Diese Komponente hängt zwar an einem mit Veraltet gekennzeichneten Github, funktioniert aber ohne Fehler und Pfosten. Alle Übersetzungen sind ordentlich über Dateien mit Sprachen verteilt.
Die Verwendung der Übersetzerparameter funktioniert auch mit einem Knall:
Im trockenen Rückstand
React Native hat fast alle Erwartungen erfüllt. Mit seiner Hilfe können Sie relativ schnell eine Prototypanwendung zusammenstellen, die Struktur und Benutzerfreundlichkeit herausarbeiten. Alle notwendigen Werkzeuge für die "Basis" sind.
Andererseits besteht immer die Gefahr, in einem „Vakuum“ zu sein, wenn es einfach keine vorgefertigten Lösungen gibt. So haben wir es zum Beispiel beim Hochladen von Fotos in die Anwendung erhalten - eine Komponente, die normalerweise Bilder schneiden und kneifen kann - nur eine. Und es hat in unserem aktuellen Build nicht begonnen. Wenn die Notwendigkeit dafür sehr "akut" ist, müssen Sie fast die Hälfte des Systems aktualisieren, was wahrscheinlich zu einer erneuten Suche nach Fehlern führen wird.
Wie sich unser auf dem React Native auf dem Markt montiertes Produkt zeigen wird, werden wir es in den kommenden Monaten herausfinden. Aber das ist eine ganz andere Geschichte.