Anfang des Jahres haben wir verschiedene Materialien zu beliebten Komponentensätzen für
React ,
Angular und
Vue veröffentlicht . Heute machen wir Sie auf eine Übersetzung eines Artikels aus derselben Serie über React Native aufmerksam. Angesichts der anhaltenden Beliebtheit von React und der Tatsache, dass mobile Anwendungen und
PWA immer beliebter werden, ist es nicht verwunderlich, dass
React Native immer mehr Aufmerksamkeit in der Entwicklergemeinde auf
sich zieht.
Das React Native-Framework ist React insofern sehr ähnlich, als seine Anwendung den Programmierer dazu ermutigt, Benutzeroberflächen mit isolierten Komponenten zu erstellen. Kits solcher Komponenten, die für die Schnittstellenentwicklung entwickelt wurden, bieten Entwicklern vorgefertigte Module, deren Verwendung Zeit spart, indem sie die Arbeit beschleunigen. Hier diskutieren wir elf Sätze von Komponenten, die von ihren Entwicklern gut unterstützt werden. Sie sind hoffentlich nützlich für alle, die Schnittstellen für React Native entwickeln müssen.
1. NativeBase
NativeBase ist ein plattformübergreifender Satz von Benutzeroberflächenkomponenten für React Native.
NativebaseDie ernsthafte Beliebtheit von NativeBase wird durch die Tatsache angezeigt, dass dieses Projekt auf GitHub ungefähr 10.000 Sterne erzielt hat und ungefähr tausend Gabeln hat. NativeBase stellt Programmierern Dutzende plattformübergreifender Komponenten zur Verfügung. Wenn Sie NativeBase verwenden, können Sie ohne zusätzlichen Aufwand alle nativen Bibliotheken von Drittanbietern verwenden. Um dieses Projekt herum gibt es ein umfangreiches Ökosystem, in dem es viele nützliche Dinge gibt - von
Tools zum Erstellen grundlegender Projekte bis zu
Tools zum Entwickeln von Themen, die zum Konfigurieren externer Themen dienen Ansicht der NativeBase-Komponenten.
2. Reagieren Sie auf native Elemente
Die plattformübergreifenden Komponenten
React Native Elements haben auf GitHub etwa 12.000 Sterne gesammelt. Komponenten aus diesem JavaScript-Komplettset sind hochgradig anpassbar.
Reagiere auf native ElementeDie Autoren des Kits
sagen, dass das Wichtigste bei React Native Elements die Struktur der Komponenten ist, nicht ihr Design. Dies bedeutet, dass zum Konfigurieren und Vorbereiten einer Komponente für die Arbeit nur sehr wenig Vorlagencode erforderlich ist. Gleichzeitig hat derjenige, der diese Komponenten verwendet, die Möglichkeit, ihr Erscheinungsbild vollständig zu kontrollieren. Ein solcher Ansatz für Komponenten kann die Aufmerksamkeit einer Vielzahl von Webprogrammierern auf sich ziehen, vom Anfänger bis zum erfahrenen.
Hier ist eine Demo-Anwendung, die auf React Native Elements
basiert und mit der Sie die Komponenten dieses Kits in Aktion sehen können.
3. Shoutem UI Toolkit
Das
Shoutem Interface Development
Toolkit , das auf GitHub rund 3.500 Sterne gesammelt hat, besteht aus drei Teilen. Dies sind
Komponenten ,
Themen und Komponentenanimationen der Benutzeroberfläche.
ShoutemShoutem bietet Entwicklern eine Reihe plattformübergreifender Komponenten für iOS und Android. Alle Komponenten werden unter Berücksichtigung der Möglichkeit ihrer gemeinsamen Verwendung erstellt. Ihr Aussehen kann
angepasst werden . Jede Komponente hat auch einen Standardstil, der mit dem Stil der anderen Komponenten übereinstimmt. Auf diese Weise können komplexe Komponenten erstellt werden, ohne dass komplexe Stilsysteme manuell konfiguriert werden müssen.
4. UI Kätzchen
Das
UI Kitten- Komponenten-Kit, der Eigentümer von ungefähr 3.000 Sternen auf GitHub, stellt dem Entwickler React Native-Komponenten zur Verfügung, die hochgradig anpassbar und für die Wiederverwendung geeignet sind.
Ui KätzchenUI Kitten basiert auf der Idee, Stildefinitionen an einen bestimmten Ort zu verschieben. Dies hilft bei der Wiederverwendung von Komponenten und erleichtert die Anpassung ihres Erscheinungsbilds. Die Themen, die auf Komponenten angewendet werden, lassen sich relativ einfach ändern, indem sie verschiedene Variablensätze übergeben.
Hier ist ein Demo-Projekt, mit dem Sie durch Experimentieren UK Kitten besser kennenlernen können.
5. Reagieren Sie auf native Material-Benutzeroberfläche
Das
React Native Material UI- Projekt, das auf GitHub etwa zweitausend Sterne hat, bietet dem Webentwickler eine Reihe von Komponenten der Benutzeroberfläche, die die Material Design-Ideen von Google implementieren und anpassbar sind. Bei der Arbeit mit der Benutzeroberfläche von React Native Material ist zu berücksichtigen, dass diese Bibliothek ein einzelnes JS-Objekt namens
uiTheme , das zur Gewährleistung eines maximalen Anpassungsgrads durch den Kontext geleitet wird.
Reagieren Sie auf die Benutzeroberfläche für natives MaterialStandardmäßig basiert das
uiTheme Objekt auf dem
lightTheme Thema, das Sie
hier finden . Und
hier ist eine Liste von Bibliothekskomponenten mit Beispielen für ihre Verwendung.
6. Native Material Kit reagieren
Obwohl das
React Native Material Kit im Dezember 2017 in NPM veröffentlicht wurde, lohnt es sich, auf diese Komponenten mit etwa 4.000 Sternen auf GitHub zu achten.
React Native Material KitDas React Native Material Kit bietet dem Entwickler eine Sammlung einfacher und praktischer Komponenten und Themen der Benutzeroberfläche, die das Google Material Design-Konzept von Google implementieren. Warum ist dieser Satz von Komponenten Aufmerksamkeit wert? Der springende Punkt ist seine Einfachheit und die Tatsache, dass nichts Überflüssiges darin ist, das ein informatives „Rauschen“ erzeugt. Es ist jedoch zu beachten, dass diese Bibliothek aufgrund der Tatsache, dass sie nicht besonders aktiv unterstützt wird, mit Vorsicht verwendet werden sollte.
7. Nachos UI
Die
Nachos UI- Bibliothek mit rund 1.500 Sternen auf GitHub bietet Entwicklern eine Reihe von mehr als 30 benutzerdefinierten Komponenten, die nicht nur in einer mobilen Umgebung als Teil von React Native-Anwendungen verwendet werden,
sondern auch für die Entwicklung von Webanwendungen mithilfe von
React- geeignet sind.
native-web .
Nachos uiNachos UI unterstützt hübschere, Garn- und Scherztests. Diese schöne, gut geschriebene Bibliothek bietet allen Interessierten interessante Designs und einen globalen Themenmanager.
8. Reagieren Sie auf die native UI-Bibliothek
Die Arbeit am Projekt
React Native UI Library erfolgt unter
Wix . Es handelt sich um eine hochmoderne Reihe von Tools zur Entwicklung von Benutzeroberflächen und eine Komponentenbibliothek für React Native. Die React Native UI Library unterstützt ohne zusätzlichen Programmieraufwand React-Native
-Animatable und React-Native
-Blur .
Reagieren Sie auf die native UI-BibliothekDiese Bibliothek enthält eine Reihe von Voreinstellungen für Stile (darunter Farben, Typografie, Schatten, Randradius und andere), die in Modifikatoren übersetzt werden.
Hier ist ein Beispiel für die Verwendung der React Native UI Library.
9. Reagieren Sie auf natives Papier
Die plattformübergreifende Komponentenbibliothek von
React Native Paper mit ca. 1.500 Sternen auf GitHub folgt den Material Design-Ideen von Google.
Natives Papier reagierenDieser Satz von Komponenten unterstützt
globale Themen . Falls erforderlich, können Sie das entsprechende Plugin für babel verwenden, um nicht verwendete Module dieses Sets zu entfernen.
Hier ist ein Beispiel mit React Native Paper.
10. Reagieren Sie auf native Vektorsymbole
Das
React Native Vector Icons- Projekt, das auf GitHub etwa 10.000 Sterne gesammelt hat, ist eine
umfangreiche Sammlung von benutzerdefinierten Symbolen für React Native-Anwendungen, die für die Verwendung auf verschiedenen Plattformen geeignet sind.
Reagiere auf native VektorsymboleSymbole von React Native Vector Icons werden in Tausenden von Anwendungen verwendet. Es ist möglich, dass sie für Sie nützlich sind.
11. Teaset
Die
Teaset- Bibliothek, die auf GitHub etwa 1300 Sterne gesammelt hat, enthält mehr als 20 Komponenten, die in reinem JS (ES6) geschrieben sind.
TeasetDas Projekt kann sich keiner umfangreichen Dokumentation rühmen, aber die Einfachheit seiner Komponenten, die sich auf die Grundbedürfnisse von React Native-Anwendungen konzentrieren, und ihr ansprechendes Erscheinungsbild lassen darauf schließen, dass Teaset zumindest einen Blick wert ist.
Zusammenfassung
Zu Beginn dieses Materials haben wir darüber gesprochen, dass React Native aufgrund der Verbreitung von React und der Beliebtheit mobiler Anwendungen immer mehr Aufmerksamkeit in der Entwicklergemeinde auf sich zieht. Daher ist es nicht verwunderlich, dass die Anzahl anständiger Entwicklungen, die Sätze von Komponenten oder Hilfstools zum Erstellen von React Native-basierten Anwendungen implementieren, nicht auf die oben untersuchten beschränkt werden kann. Wenn Sie nach etwas Ähnlichem für Ihre React Native-Anwendung suchen, finden Sie hier einige weitere Projekte, die es wert sind, beachtet zu werden:
Liebe Leser! Wenn Sie mobile Anwendungen auf der Basis von React Native entwickeln, teilen Sie uns bitte mit, welche Komponenten und Hilfstools Sie dafür verwenden.
