15 Reagieren Sie auf native Komponentenbibliotheken, die Sie 2020 kennen sollten

15 Reagieren Sie auf native Komponentenbibliotheken, die Sie 2020 kennen sollten

15 Reagieren Sie auf native Komponentenbibliotheken, die Sie 2020 kennen sollten
СОДЕРЖАНИЕ
02 июня 2020

Reagieren Sie auf native Komponentenbibliotheken, die Sie kennen sollten


React Native-Komponentenbibliotheken können viel Zeit sparen, wenn Sie an Ihrem nächsten App-Projekt arbeiten. Woher? Beginnen wir mit React selbst. Sie wissen wahrscheinlich, dass React eine Open-Source-JavaScript-Bibliothek ist, die beim Erstellen von Benutzeroberflächen für webbasierte und mobile Apps hilft. Es enthält eine Reihe von Komponenten, die Sie problemlos für Ihre Apps verwenden können.

Normalerweise müssen Sie beim Erstellen von Komponenten in React diese so gestalten, dass sie den Richtlinien der Plattform entsprechen, auf die Sie abzielen. Das ist wo Native reagieren kann helfen. Mit diesem Framework können Sie mobile Apps entwickeln, indem Sie React zusammen mit den nativen Funktionen der Zielplattform verwenden.

Zuvor haben wir einen Beitrag mit den besten UI-Komponentenbibliotheken und Frameworks geschrieben. In diesem Beitrag werden wir uns die React Native-Komponentenbibliotheken genauer ansehen.

Best React Native-Komponentenbibliotheken des Jahres

1. NativeBase

Best React Native-Komponentenbibliotheken Nr. 1: NativeBase

Wenn Sie React-Komponenten für verschiedene Plattformen neu schreiben, sollten Sie NativeBase ausprobieren, ein dynamisches Front-End-Framework. Die Bibliothek ist eine Sammlung wesentlicher plattformübergreifender React Native-Komponenten und ein guter Ort, um mit der Erstellung Ihrer App zu beginnen. Die Komponenten werden mit React Native in Kombination mit einigen JavaScript-Funktionen mit anpassbaren Eigenschaften erstellt. Sie können auch alle nativen Bibliotheken von Drittanbietern verwenden.

NativeBase ist vollständig Open Source und hat mehr als 12.000 Sterne Github. Die Themen haben jedoch einen hohen Stellenwert, da weitere Funktionen und Bildschirme hinzugefügt werden. NativeBase ist jetzt verfügbar für Webbenutzer zu. Wenn Sie dieselbe JavaScript-Codebasis verwenden und mit plattformspezifischem Design für Android und iOS arbeiten, können Sie ein natives Erscheinungsbild für Ihre App erzielen. Zu ihren Open Source-Projekten gehören eine native Starter-App, eine Twitter Clone-App, eine ToDo-App und eine Tutorial-App. In ihrem Premium-Warenkorb finden Sie Starter-Apps für Buchungen, Anmietungen, Stellenanzeigen, Nachrichten und mehr.

2. Material Kit React Native

Best React Native-Komponentenbibliotheken Nr. 2: Material-Kit-React-Native

Material Kit React Native bietet eine kostenlose native App-Vorlage mit Materialdesign. Gebaut mit dem Galio Framework, Es werden die gängigsten Komponenten neu gestaltet, um die Dinge auf ein Minimum zu beschränken und mit dem Materialdesign von Google in Einklang zu kommen. Es ist einfach zu bedienen und enthält mehr als 200 handgefertigte Elemente wie Schaltflächen, Karten, Navigation und Eingaben. Alle Komponenten können Farbvariationen annehmen, indem sie Änderungen am Thema vornehmen. Zusätzlich gibt es fünf angepasste Plugins und fünf Beispielseiten.

Mit fast 200 Sternen Github, es bietet eine Pro-Version Außerdem erhalten Sie Zugriff auf weitere Beispielseiten und Dokumentationen.

3. Native Elemente reagieren

Best React Native-Komponentenbibliotheken Nr. 3: React-Native-Elemente

React Native Elements ist ein plattformübergreifendes React Native UI-Toolkit, das eine Reihe großartiger Open Source-UI-Komponenten von Entwicklern an einem Ort zusammenfasst. Sie können in die von React Native Elements zusammengestellten Pakete eintauchen und sicherstellen, dass die API ein einheitliches Erscheinungsbild aufweist. Es ist nicht verwunderlich, dass es 17.000 Sterne erhalten hat Github.

Das Paket enthält einen ganzen Korb mit Komponenten wie Preisgestaltung, Ausweis, Overlay, Teiler und plattformspezifischen Suchleisten. Sie sind einfach zu bedienen und wirklich anpassbar. Die Requisiten für alle Komponenten sind an einem zentralen Ort definiert, sodass Komponenten einfach aktualisiert oder geändert werden können. Darüber hinaus kann es als Plattform dienen, die kleine Teams, die kommerzielle React Native-Apps entwickeln, mit Open Source-Beiträgen verbindet.

Um React Native für Ihre webbasierten Projekte zu verwenden, gibt es Folgendes: Native Web reagieren. Es ermöglicht die Erstellung schneller, adaptiver Benutzeroberflächen in JavaScript und lässt sich in die React Dev-Tools integrieren. Sie können Ihre Codebasis zwischen React Native-Apps und Web-Apps teilen. Es unterstützt Typ, Klick oder Wischen als Eingabemodi, verfügt über integrierte Eingabehilfen und RTL-Unterstützung und wird von Twitter, Uber und Flipkart verwendet.

4. Lottie für React Native

Lottie

Lottie ist eine Bibliothek von Airbnb für Handys, mit der Sie Ihren Apps Animationen hinzufügen können. Normalerweise müssen Sie Animationen nach dem Erstellen in Adobe After Effects in ein Format konvertieren, das in Ihrer Web-App verwendet werden kann. Lottie hilft dir dabei.

Es funktioniert durch Exportieren von Animationsdaten im JSON-Format aus einer After Effects-Erweiterung, BodyMovin. Diese Erweiterung wird mit einem JS-Player gebündelt, um Animationen im Web zu rendern. Es funktioniert auch mit React Native und Sie können auf die offiziellen Dokumente unter zugreifen Github wo es fast 12.000 Sterne gesammelt hat.

Lottie Bibliotheken und Plugins sind kostenlos erhältlich, Mit der kuratierten Sammlung von Animationsdateien können Sie Ihre Apps attraktiv und interessant gestalten. Die Animationsdateien sind klein und im Vektorformat. Daher sollten Sie keine Auswirkungen auf die Leistung Ihrer App haben. Gleichzeitig kann es Ihre Benutzeroberfläche aufpeppen und optisch ansprechender machen.

5. Reagiere auf native Vektorsymbole

React-Native-Vector-Icons

Diese gehört zu den besten React Native-Komponentenbibliotheken, wenn Sie nach Symbolen suchen, die Sie in Ihren Apps verwenden können. Mit einer Bibliothek von mehr als 3.000 Symbolen finden Sie ziemlich sicher etwas, das Ihren Anforderungen entspricht. Darüber hinaus können Sie die Symbole anpassen, formatieren und erweitern, während Sie sie in Ihr Projekt integrieren.

Das Paket unterstützt TabBar und Toolbar Android sowie Bildquellen und Schriftarten mit mehreren Stilen. Mit fast 12.000 Sternen Github, Es passt perfekt zu Schaltflächen, Logos und Navigationsleisten. Es zieht weiter Reagieren Sie auf die animierte Bibliothek von Native Kombinieren Sie es mit einem beliebigen Symbol, um eine animierte Komponente zu erstellen. Wenn Sie bereits eine Symbolschriftart mit der zugehörigen CSS-Datei haben, können Sie mit dem Skript zum Generieren von Symbolen ganz einfach einen Symbolsatz generieren.

6. CLI entzünden

entzünden

Ignite CLI ist ein solides Starter-Kit für React Native-Apps. Mit dem standardmäßigen React Native-Boilerplate können Sie mühelos native Apps erstellen. Es lässt sich leicht installieren und entspricht den Best Practices bei seiner Konstruktion. Gleichzeitig können Sie die Kesselplatten an Ihr Projekt anpassen. Standardmäßig funktioniert es sowohl mit Android als auch mit iOS. Es werden auch eigenständige Plugins unterstützt.

Darüber hinaus können Sie aus einer Reihe von Boilerplates auswählen oder eine eigene starten. Mit dem modularen Plugin-System können Sie Anwendungsfunktionen hinzufügen oder eigene schreiben. Mithilfe eines Verwendungsbeispielbildschirms können Sie Bibliotheken von Drittanbietern testen und Apps erstellen, die aus mehreren Komponenten bestehen. Der Bildschirm enthält auch Beispiele für häufig verwendete Apps, die mit grundlegenden Komponenten erstellt wurden. In diesem Bildschirm werden auch die Beispiele in den Komponentendateien registriert, damit Sie die Komponenten leichter identifizieren und leicht ändern können. Auf diesem Bildschirm können Sie Komponenten testen, verwenden und für Ihr Team freigeben. Ignite CLI hat mehr als 10.000 Sterne verdient Github.

7. Reagieren Sie auf Native Mapview

React-Native-Maps

Eine der React Native-Komponentenbibliotheken, die Kartenkomponenten für Android und iOS bietet, ist React Native Mapview. Die Konstruktion ist so, dass reguläre Features auf jeder Karte wie Markierungen und Polygone als untergeordnete Elemente der Mapview-Komponente angegeben werden. Dies unterstützt die API dabei, Features auf der Karte intuitiv deklarativ zu steuern. Sie müssen sicherstellen, dass die Google Maps-API in der Google-Konsole aktiviert ist.

Sie können viel tun, um den Kartenstil anzupassen. Sie können die Position der Kartenansicht ändern, die Region / den Standort verfolgen und Sonderziele in Google Maps anklickbar machen. Sie können das Vergrößern bestimmter Markierungen oder Koordinaten aktivieren oder sogar animieren. Wenn Sie der Requisite einen animierten Regionswert zuweisen, kann Mapview die animierte API verwenden, um die Mitte und den Zoom der Karte zu steuern. Sofern Sie keine benutzerdefinierten Markierungen angeben, werden Standardmarkierungen gerendert.

Was cool ist, ist, dass die Markierungen ziehbar sind, mithilfe von Bildern angepasst werden können und andere Benutzeroberflächen während des Ziehens aktualisiert werden. Wenn Sie mehr benötigen, gibt es benutzerdefinierte Beschriftungen für Markierungen, Polygonersteller sowie Kreis- und Polygonüberlagerungen. iOS-Benutzer können Verlaufspolylinien erstellen. Kein Wunder, dass es mehr als 10.000 Sterne hat Github.

8. Reagiere auf begabten Chat

React-Native-Gifted-Chat

Wie der Name schon sagt, hilft Ihnen React Native Gifted Chat beim Einrichten einer Chat-Benutzeroberfläche für React Native (und das Web). Mit TypeScript geschrieben, enthält es vollständig anpassbare Komponenten, mit denen frühere Nachrichten geladen oder Nachrichten in die Zwischenablage kopiert werden können. Es gibt auch eine InputToolbar, mit der Benutzer die Tastatur überspringen können.

Um die Benutzererfahrung zu verbessern, werden Avatar als Initialen des Benutzers, lokalisierte Daten, mehrzeiliger TextInput, schnelle Antwortnachrichten (Bot) und Systemnachrichten aktiviert. Es gibt auch Unterstützung für Redux. Gifted Chat hat mehr als 8.000 Sterne Github.

9. Reagiere auf Native UI Kitten

React-Native-UI-Kätzchen

Eine der React Native-Komponentenbibliotheken, die als Starter-Kit für mobile Apps für jede Domain, einschließlich E-Commerce, verwendet werden kann, ist React Native UI Kitten – eine React Native-Implementierung von Eva Design System. Mit einer Bewertung von 5.000+ Sternen Github, Es bietet einen Satz von etwa 20 Allzweckkomponenten, die auf die gleiche Weise gestaltet sind, um das visuelle Erscheinungsbild zu gewährleisten.

Mit dieser für immer kostenlosen und Open Source-Bibliothek können Sie die bereitgestellten Themen verwenden oder so viele eigene Themen erstellen, ohne den Quellcode der Komponenten zu ändern. Darüber hinaus können Sie zur Laufzeit zwischen dunklen und hellen Themen wechseln, ohne die Seite neu laden zu müssen. Sobald Sie das UI Kitten-Paket von NPM installiert haben, können Sie die Komponenten importieren und in Ihrem Projekt verwenden.

10. Native Paper reagieren

reaktionsfähiges Papier

Eine weitere kostenlose Open-Source-Bibliothek ist React Native Paper. Es enthält alle wichtigen Komponenten. Diese Komponenten entsprechen den Materialdesign-Standards von Google.

Papier ist plattformübergreifend und funktioniert sowohl im Internet als auch auf Mobilgeräten. Es gibt Komponenten und Interaktionen für nahezu jedes Anwendungsszenario. Die meisten Details, einschließlich Animationen, Barrierefreiheit und UI-Logik, werden berücksichtigt. Sie können Standardfarben anpassen oder eigene Farben erstellen. Außerdem haben Sie volle Theming-Unterstützung sowie die Möglichkeit, zwischen Dunkel- und Hellmodus zu wechseln. Auf Github, es sammelt mehr als 4.000 Sterne.

11. React Native Material Kit

React-Native-Material-Kit

Als nächstes steht auf unserer Liste der React Native-Komponentenbibliotheken ein weiterer Satz von UI-Komponenten, die das Materialdesign zu React Native bringen. Im Inneren finden Sie Schaltflächen, Karten, Bereichsregler und Textfelder. Außerdem werden Drehfelder und Fortschrittsbalken angezeigt, um das Laden anzuzeigen, sowie Schalter für Schalter, Optionsfelder und Kontrollkästchen.

Es sind nur ein paar Codezeilen erforderlich, um Schaltflächen mit vordefinierten Buildern hinzuzufügen, die dem Standarddesign von Material Design Lite entsprechen. Mit dem Builder können Sie auch benutzerdefinierte Schaltflächen von Grund auf neu erstellen. Gleiches gilt für eingebaute Textfelder. Darüber hinaus können Sie die Stile anpassen, indem Sie das globale Thema ändern. Dies wirkt sich auf alle Kontrollkästchen und Optionsfelder in der gesamten App aus. Auf Github, Diese Bibliothek erhält 4.700 Sterne.

12. Reagiere auf native Material-Benutzeroberfläche

React-Native-Material-UI

Die Benutzeroberfläche von React Native Material bietet nahezu 20 Komponenten für React Native. Zu den Komponenten gehören Aktionsschaltflächen, Avatare, Unterüberschriften, Schubladen, Teiler, Symbolleisten und mehr. Diese Komponenten sind hochgradig anpassbar und verwenden in ihrem Konstrukt Materialdesign. Jede Anpassung, die Sie am Thema vornehmen, kann auch auf andere Komponenten ausgedehnt werden, einschließlich aller, die Sie selbst erstellen. Lokale Änderungen können vorgenommen werden, indem Stile bei Bedarf überschrieben werden.

Falls Sie bereits React Native Vector Icons verwenden, ist bei der Installation nicht viel zu tun. Andernfalls müssen Sie herunterladen Materialsymbole für Android und stellen Sie sicher, dass Sie haben Roboto für iOS. Diese Bibliothek hat mehr als 3.000 Sterne verdient Github.

13. RNUILIB

rnuilib

Mit mehr als 60 Komponenten in diesem Kit zeigt RNUILIB fast 2.000 Sterne an Github. Mit Live-Beispielen für alle Komponenten können Sie die verfügbaren Optionen überprüfen, bevor Sie sie in Ihrem Projekt verwenden.

Einige der Komponenten sind: ein animiertes Bild, ein Scanner zur Anzeige des Fortschritts, Avatare zur Anzeige von Profilbildern, grundlegende Schaltflächen und Komponenten für Verlaufsschieberegler.

14. Nachos UI

Nachos UI

Mit mehr als 30 vorgefertigten Komponenten, die Sie mit jedem JavaScript- oder React Native-Projekt verwenden können, erhält Nachos UI mehr als 1.900 Sterne Github. Was wirklich hilft, ist, dass Sie sich nicht zu viele Gedanken über das Styling einer Komponente machen müssen. Sie müssen lediglich die vorgestalteten Eingaben von einer Komponente in eine andere importieren. Wählen Sie nach der Installation des Nachos UI-Kits eine beliebige Komponente aus, importieren Sie den entsprechenden React Native-Code und passen Sie ihn dann an Ihr Projekt an.

Diese kostenlose Open-Source- und Community-gesteuerte Software verwendet Avocode, ein voll funktionsfähiges Tool zum Freigeben und Überprüfen von Photoshop- und Sketch-Designs. Dank an Reagiere Native für Web, Sie können es auch für webbasierte Projekte verwenden.

fünfzehn. Shoutem

schreien

Shoutem ist eine App-Erstellungsplattform, die mithilfe von Erweiterungen oder modularen Bausteinen funktioniert, ähnlich wie beim Erstellen einer Website mit Plugins in WordPress. Mit mehr als 40 Erweiterungen mit vollem Funktionsumfang wurden mehr als 450 Sterne gesammelt Github. Zu den Erweiterungen gehören Galerien für Fotos und Videos, Produkte, Veranstaltungen, Restaurantmenüs und mehr. Sie können diese Open Source-Erweiterungen frei in Ihrer App verwenden. Und indem Sie sie einfach gabeln, können Sie sie beliebig ändern.

Shoutem bietet viele mobile Back-End-Dienste wie Analysen, Benutzerauthentifizierung, Layouts, Push-Benachrichtigungen und mehr. Darüber hinaus gibt es viele gut codierte Themen, die Sie verwenden und anpassen können. Shoutem verwendet 100% JavaScript und React Native.

Nun, das ist unsere Liste der besten React Native-Komponentenbibliotheken. Welches ist deine Wahl? Teilen Sie in den Kommentaren.

Diese Artikel könnten Sie auch interessieren:

  • Reagieren Sie native Vorlagen für die App-Entwicklung

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector