Share
Werkzeuge, Bibliotheken und Services sind ein wichtiger Bestandteil des Lebens eines jeden Entwicklers, unabhängig davon, für welche Umgebung Sie sich entwickeln. Und React Native ist keine Ausnahme. In diesem Artikel werde ich Sie durch einige der besten UI-Frameworks, Bibliotheken, Komponenten, Entwicklungstools und Webservices führen, die Sie zu einem glücklicheren und produktiveren React Native-Entwickler machen werden.
Visual Studio Code ist ein Texteditor mit integrierten IntelliSense-, Debugging- und Git-Integrationsfunktionen. Was es für die Entwicklung von React Native wirklich gut macht, ist die Erweiterung der React Native Tools. Auf diese Weise können Sie React Native-Befehle über die Befehlspalette ausführen, IntelliSense für React Native-APIs hinzufügen und im Editor selbst Debug-Code hinzufügen.
Weitere Informationen zum Einrichten von Visual Studio Code für React Native finden Sie in diesem Blogbeitrag: VSCode for React Native.
Wenn Sie Atom verwenden, können Sie das Nuclide-Plugin installieren. Dieses Plugin wurde speziell für die Arbeit mit React Native-, Flow- und Hack-Projekten erstellt. Es verfügt über einen integrierten Debugger- und Elementinspektor mit allen Funktionen, die Sie in den Chrome Developer Tools kennen. Flussunterstützung bedeutet, dass Sie automatisch Autocomplete, Typhinweise und Codediagnose erhalten.
Wenn Sie weitere IDE- und Editor-Optionen erkunden möchten, lesen Sie diesen Blogeintrag in den Top 10 Editors for React Native.
Entwicklungstools haben einen breiten Anwendungsbereich, daher werde ich jedes Tool nach seinem Fokus gruppieren:
Wenn es um SDKs für React Native geht, geht nichts über die Expo. Mit Expo können Sie auf einfache Weise eine App prototypisieren, ohne dass Android Studio oder Xcode erforderlich ist. Es enthält eine Reihe von Komponenten und Bibliotheken, mit denen Sie Ihre Entwicklung beschleunigen können.
Der Expo-Workflow besteht aus folgenden Elementen:
Sie müssen Ihr Telefon nicht an Ihren Computer anschließen. Scannen Sie einfach den QR-Code in Ihrem Terminal mit der Expo-Client-App, und Ihre App wird automatisch ausgeführt. Wenn Sie Genymotion verwenden, unterstützt Expo dies auch.
Der einzige Nachteil bei der Verwendung von Expo besteht darin, dass Sie kein benutzerdefiniertes Paket einschließen können, das die native Funktionalität des Geräts verwendet. Die Expo enthält bereits eine Reihe von häufig verwendeten nativen Paketen wie Camera, Facebook und Map. Wenn Sie jedoch ein Paket verwenden müssen, das noch nicht unterstützt wird, müssen Sie Ihre App "auswerfen". Zu diesem Zeitpunkt wird Ihre App so aussehen, als wäre sie mit erstellt worden reaktiver init, Sie verlieren auch die Möglichkeit, es mit der Expo-Client-App auszuführen.
Es ist wichtig, die Qualität des Codes zu überprüfen. Aus diesem Grund gibt es Tools wie ESLint. Kurz gesagt: Mit einem Linting-Tool können Sie Ihren Code konsistenter gestalten, indem Sie ihn anhand eines Style-Guides überprüfen. Ein Beispiel für einen solchen Style Guide ist der JavaScript Style Guide von Airbnb, in dem Sie Regeln für das Schreiben von JavaScript-Code angeben. Das Linting-Tool überprüft dann Ihren Code anhand dieser Regeln, um sicherzustellen, dass sie befolgt werden. Es gibt auch einen Styleguide für React-Projekte.
Wenn Sie Sublime Text verwenden, finden Sie hier eine gute Anleitung, wie Sie ihn so konfigurieren können, dass Sie während der Codierung Echtzeit-Feedback zur Qualität Ihres Codes erhalten: Sublime Linting for React und ES6. Wenn Sie einen anderen Editor oder eine andere IDE verwenden, müssen Sie nach einem entsprechenden Plugin suchen, das ESLint verwendet.
Wenn Sie Ihrem Projekt statische Typisierung hinzufügen möchten, können Sie Flow verwenden. Flow fügt statische Typisierung über JavaScript hinzu, ohne dass Sie Änderungen an Ihrer vorhandenen Codebase vornehmen müssen. Dies liegt daran, dass Flow versucht, den Typ möglichst immer abzuleiten. Bei neuen Projekten wird jedoch empfohlen, den Typ explizit anzugeben, um die vollen Vorteile der Verwendung von Flow zu nutzen.
Um mit Flow arbeiten zu können, finden Sie hier ein Tutorial, wie Sie Flow für Ihre React Native-Projekte einrichten können.
Enzyme ist ein Testprogramm für React, mit dem Sie die Ausgabe Ihrer Komponente aktivieren, bearbeiten und durchlaufen können. Es bietet Methoden wie flach() um Ihre Komponenten "flach" zu rendern, finden() um die gerenderte Komponente zu durchqueren, und erwarten von() die Requisiten oder den in der Komponente gerenderten Inhalt geltend machen.
Folgen Sie dieser Anleitung zur Verwendung von Enzymen zum Testen von Komponenten in React Native, um Ihre React Native-App mit Enzym testbar zu machen. Wenn Sie mit Enzym noch nicht vertraut sind, können Sie dieses Tutorial zum Testen von Reaktionskomponenten mit Enzym und Mokka lesen.
Reactotron ist eine Desktop-App, mit der Sie React und React Native Apps debuggen können. Zu den wichtigsten Funktionen gehören das Überprüfen, Ändern und Abonnieren des App-Status, das Verfolgen von HTTP-Anforderungen, die über die App erfolgen, das Benchmarking der App-Leistung und das Verfolgen von Fehlern. Wenn Sie Redux verwenden, können Sie innerhalb von Reactotron sogar Aktionen auslösen und Sagas verfolgen.
Snowflake ist eine Boilerplate für die React Native-Entwicklung mit vollem Stapel. Es umfasst alles vom Frontend bis zum Backend der App. Wenn Sie also nur ein Werkzeug benötigen, mit dem Sie schnell loslegen können, ist Snowflake möglicherweise hilfreich. In den Hinweisen finden Sie weitere Informationen dazu, mit welchen Paketen und Tools es erstellt wird.
Alternativ können Sie Ignite verwenden. Es ist ein Befehlszeilentool, das auch eine Boilerplate, Generatoren, einen Style Guide für UI-Komponenten, ein API Testing Tool und vieles mehr enthält.
React Native enthält bereits UI-Komponenten, die Sie für die Benutzerinteraktion verwenden können. Das Problem ist, dass sie nur den grundlegendsten Stil aufweisen, damit jede Komponente für das, was sie ist, unterschieden wird (z. B. Schaltfläche, Kontrollkästchen). Wenn Sie benutzerdefinierte Stile hinzufügen möchten, müssen Sie Ihren eigenen CSS-Code schreiben.
An dieser Stelle kommt NativeBase ins Spiel. Mit NativeBase können Sie Ihre App wirklich nativ aussehen lassen, indem Sie dasselbe Design implementieren, das in den Apps für Android (Material Design) und iOS (Human Interface Guidelines) verwendet wird. Standardmäßig erhalten Sie benutzerdefinierte Komponenten wie schwebende Aktionsschaltflächen, Spinner und vor allem Formularkomponenten.
React Native hat eine große Community hinter sich, daher gibt es viele Bibliotheken und Komponenten, die Sie verwenden können. Wir könnten den ganzen Tag darüber reden, um mich kurz zu fassen, konzentriere ich mich auf die folgenden Bereiche:
React Navigation ermöglicht Ihnen die einfache Implementierung der Navigation in Ihren React Native-Apps mithilfe der integrierten Navigatoren wie Stack Navigator, Tab Navigator und Drawer Navigator. Das ist aber noch nicht alles: Neben der In-App-Navigation umfasst es auch Deep Linking, Redux-Integration und Web-Integration. Dies macht es zu einer wirklich robusten Bibliothek für die Implementierung der Navigation.
MobX bietet die Funktionalität zum Aktualisieren und Verwalten des von React verwendeten App-Status. Was es zu einem guten Kandidaten für das staatliche Management in React macht, ist seine Einfachheit und Testbarkeit. Es hat auch eine kurze Lernkurve, sodass Dinge wie asynchrone Funktionen und berechnete Werte bereits hinter den Kulissen behandelt werden.
Für größere und komplexere Anwendungen wird immer noch Redux empfohlen. Dies liegt daran, dass MobX sehr liberal ist, im Gegensatz zu Redux, das strikte Richtlinien für die Verwaltung des Staates enthält. Daher ist es eine klügere Wahl für größere Projekte, bei denen mehr Leute daran arbeiten.
React Native enthält bereits eine Animations-API. Tatsächlich gibt es nicht nur eine, sondern zwei APIs für die Arbeit mit Animationen: Animierte API und LayoutAnimation. Diese beiden sind sehr mächtig, können jedoch umständlich sein, insbesondere wenn Sie lediglich grundlegende Animationen anwenden möchten, z. B. ein Objekt nach oben und unten verschieben oder abprallen lassen. In solchen Fällen sind Komponenten wie Animatable hilfreich.
Hier ist eine Liste von Komponenten und Bibliotheken, die häufig in React Native-Projekten verwendet werden. Diese sind mit Android- und iOS-Geräten kompatibel:
Sie können serverlose Apps erstellen und die Bereitstellung Ihrer React Native-Apps mithilfe von Webdiensten vereinfachen. Es gibt eine Fülle von Webservices, aber ich konzentriere mich auf die folgenden Bereiche:
Realm ist eine Echtzeitdatenbank mit Fokus auf mobile Apps. Dazu gehören Funktionen wie die bidirektionale Datensynchronisierung, Offline-first-Funktionen und Data Push. Die Realm Mobile-Datenbank ist Open Source und plattformübergreifend. Das heißt, Sie können den Realm Object Server auf Ihrem eigenen Server hosten und anschließend die Realm-JavaScript-Bibliothek kostenlos verwenden.
In der Developer Edition sind nicht alle Funktionen verfügbar. In den meisten Anwendungsfällen sollten Sie jedoch nur mit der Developer Edition zufrieden sein, da sie die Kernfunktionen wie Objektdatenbank, Echtzeitsynchronisierung und Authentifizierung enthält. Hier ist ein Vergleich von dem, was Sie für jede Edition erhalten: Realm Products und Pricing.
Wenn Realm zu viel für Ihre Anforderungen ist, können Sie immer bei der AsyncStorage-API bleiben, die mit React Native geliefert wird.
Fabric ist ein All-in-One-Dienst, mit dem Sie unter anderem Analysen in Ihrer App hinzufügen können. Es gibt Antworten, So erhalten Sie Echtzeitstatistiken zur Verwendung Ihrer App. Dies umfasst die Anzahl der aktiven Benutzer, die Sitzungsdauer und die Verweildauer. Es gibt auch Crashlytics, was Ihnen leistungsfähige Funktionen zur Crash-Berichterstellung bietet. All dies geschieht in Echtzeit und Sie können es im Echtzeit-Dashboard von Fabric anzeigen. Mit der Fabric-Bibliothek können Sie Fabric ganz einfach für Ihre React Native-App einrichten.
Wenn Sie lieber bei einer bewährten Lösung wie Google Analytics bleiben, gibt es auch eine Bibliothek, in der Sie dies tun können.
Es gibt wirklich keinen Wettbewerb, wenn es darum geht, Push-Benachrichtigungen in Apps zu implementieren. Mit Firebase Cloud Messaging (früher bekannt als Google Cloud Messaging) können Sie Push-Benachrichtigungen an Android- und iOS-Apps senden. Sie können das Paket "package-native-fcm" verwenden, um von Ihrer App aus mit FCM zu kommunizieren.
Mit CodePush können Sie Code-Updates für mobile Apps direkt auf den Geräten der Benutzer bereitstellen. CodePush fungiert als zentrales Repository, in dem Sie Änderungen an HTML, CSS, JavaScript und Assets wie Bildern bereitstellen können. Der entsprechende CodePush-Code in der App würde dann diese Änderungen abrufen. Dies ist ideal, wenn Sie Fehlerbehebungen an die App weiterleiten möchten, ohne sie im App Store hochladen zu müssen und darauf zu warten, dass Benutzer die App aktualisieren. Sie können dieses Paket verwenden, um Updates von CodePush in Ihrer React Native-App abzurufen.
Bitrise ist ein Continuous Delivery Service für die Entwicklung mobiler Apps. Sie können damit Ihre Tests ausführen, die App erstellen und diese bei jeder Bereitstellung des Codes automatisch auf die Geräte Ihrer Benutzer übertragen.
Bitrise kann in jedem Schritt Ihres Entwicklungsworkflows mit einer Reihe von Services integriert werden. Wenn Sie beispielsweise in GitHub zu Ihren Release-Zweigen wechseln, wird Bitrise über diesen Push-Through-Webhook informiert. Dann werden die Tests gestartet. Sobald die Tests bestanden sind, beginnt der Erstellungsprozess. Wenn es sich nur um ein "Soft Release" handelt (z. B. Änderungen am JavaScript-Code), können die Änderungen über CodePush für die Benutzer bereitgestellt werden. Wenn jedoch Änderungen am nativen Code vorgenommen werden (z. B. wenn Sie ein Kamera-Plugin hinzugefügt haben), kann Bitrise auch ein APK oder IPA Datei und stellen Sie sie in Google Play oder iTunes Connect bereit.
Fastlane ist eine Sammlung von Tools, die den Build- und Release-Prozess für Android- und iOS-Apps automatisieren. Bei iOS werden Aufgaben wie das Ausführen Ihrer Tests, das Erstellen von Screenshots, das Signieren von Codes und das Freigeben der App für den App Store ausgeführt. Es enthält auch Beta-Test-Tools wie Pilot und Boarding. Pilot können Sie Ihre App auf iTunes Connect hochladen und Ihre TestFlight-Betatester direkt von der Befehlszeile aus verwalten. Beim Boarding wird eine Anmeldeseite für TestFlight-Betatester erstellt.
Die Tools sind eher auf die Bereitstellung von iOS ausgerichtet. Sie können jedoch auch von der Bereitstellung von Android-Apps profitieren. Derzeit sind nur zwei Tools für die Android-Bereitstellung verfügbar: Versorgung und Screengrab.
Liefern ermöglicht das Automatisieren des Uploads von Assets wie App-Symbol, Promo-Grafiken und Screenshots Ihrer App. Außerdem können Sie Ihre vorhandenen Apps im Google Play Store aktualisieren.
Screengrab, automatisiert andererseits die Erzeugung von Screenshots für mehrere Geräte. Jeder Screenshot kann auch lokalisiert werden, wenn Ihre App mehrere Sprachen unterstützt.
Das ist es! In diesem Artikel haben Sie einige der Tools, Bibliotheken und Dienste kennen gelernt, die Sie beim Entwickeln von React Native-Apps verwenden können. Was ist mit dir? Welche Tools stehen Ihnen zur Verfügung, wenn Sie Apps in React Native entwickeln möchten?
Und während Sie hier sind, lesen Sie einige unserer anderen Beiträge zur Entwicklung von React Native-Apps!
Accentsconagua