Au début de l'année, nous avons publié plusieurs documents sur des ensembles de composants populaires pour
React ,
Angular et
Vue . Aujourd'hui, nous portons à votre attention une traduction d'un article de la même série sur React Native. Étant donné la popularité continue de React et le fait que les applications mobiles et
PWA deviennent de plus en plus populaires, il n'est pas surprenant que
React Native attire de plus en plus l'attention de la communauté des développeurs.
Le framework React Native est très similaire à React dans la mesure où son application encourage le programmeur à créer des interfaces utilisateur à l'aide de composants isolés. Les kits de ces composants, conçus pour le développement d'interfaces, offrent aux développeurs des modules prêts à l'emploi, dont l'utilisation permet de gagner du temps en accélérant le travail. Nous discutons ici de onze ensembles de composants qui sont bien pris en charge par leurs créateurs. J'espère qu'ils seront utiles pour tous ceux qui doivent développer des interfaces sur React Native.
1. NativeBase
NativeBase est un ensemble multiplateforme de composants d'interface utilisateur pour React Native.
NativebaseLa sérieuse popularité de NativeBase est indiquée par le fait que ce projet a marqué environ 10 mille étoiles sur GitHub, et qu'il a environ un millier de fourches. NativeBase met des dizaines de composants multiplateformes à la disposition des programmeurs. Lorsque vous utilisez NativeBase, vous pouvez, sans efforts supplémentaires, utiliser des bibliothèques tierces natives, et autour de ce projet, il existe un vaste écosystème dans lequel il y a beaucoup de choses utiles - des
outils pour créer des projets de base aux
outils pour développer des thèmes qui servent à configurer externe vue des composants NativeBase.
2. Réagissez aux éléments natifs
L'ensemble de composants multiplateforme
React Native Elements a collecté environ 12 mille étoiles sur GitHub. Les composants de cet ensemble JavaScript complet sont hautement personnalisables.
Réagir aux éléments natifsLes auteurs du kit
disent que la chose la plus importante dans React Native Elements est la structure des composants, pas leur conception. Cela signifie que pour configurer un composant et le préparer au travail, très peu de code de modèle est nécessaire. Dans le même temps, celui qui utilise ces composants a la possibilité de contrôler complètement leur apparence. Une telle approche des composants peut attirer l'attention de larges couches de programmeurs Web, des débutants aux plus expérimentés.
Voici une application de démonstration construite sur la base de React Native Elements, avec laquelle vous pouvez voir les composants de ce kit en action.
3. Boîte à outils Shoutem UI
La
boîte à outils de développement d'interface
Shoutem , qui a collecté environ 3 500 étoiles sur GitHub, se compose de trois parties. Ce sont des
composants d' interface utilisateur, des
thèmes et des
animations de composants.
ShoutemShoutem fournit aux développeurs un ensemble de composants multiplateformes conçus pour iOS et Android. Tous les composants sont créés en tenant compte de la possibilité de leur utilisation conjointe. Leur apparence peut être
personnalisée . Chaque composant a également un style standard cohérent avec le style des autres composants. Cela permet de créer des composants complexes sans avoir à configurer manuellement des systèmes de style complexes.
4. UI Kitten
Le kit de composants
UI Kitten , propriétaire d'environ 3000 étoiles sur GitHub, met à la disposition du développeur React Native-composants qui sont hautement personnalisables et adaptés à la réutilisation.
Chaton uiUI Kitten est basé sur l'idée de déplacer les définitions de style vers un emplacement spécifique, ce qui aide à réutiliser les composants et facilite la personnalisation de leur apparence. Les sujets appliqués aux composants sont assez faciles à changer, comme on dit, à la volée, en leur passant différents ensembles de variables.
Voici un projet de démonstration, en expérimentant avec lequel, vous pourrez mieux connaître UK Kitten.
5. React Native Material UI
Le projet
React Native Material UI , qui compte environ 2 000 étoiles sur GitHub, fournit au développeur Web un ensemble de composants d'interface utilisateur qui mettent en œuvre les idées de conception de matériaux de Google et sont personnalisables. Lorsque vous travaillez avec l'interface utilisateur React Native Material, il convient de considérer que cette bibliothèque utilise un seul objet JS appelé
uiTheme , qui, pour garantir le niveau maximal de personnalisation, est transmis dans le contexte.
React Native Material UIPar défaut, l'objet
uiTheme basé sur le thème
lightTheme , qui peut être trouvé
ici . Et
voici une liste des composants de la bibliothèque avec des exemples de leur utilisation.
6. Kit React Native Material
Bien que
React Native Material Kit ait été publié dans NPM en décembre 2017, cet ensemble de composants, avec environ 4000 étoiles sur GitHub, mérite une attention particulière.
Kit de matériaux natifs ReactLe kit React Native Material offre au développeur une collection de composants et de thèmes d'interface utilisateur simples et pratiques qui mettent en œuvre le concept Google Material Design de Google. Pourquoi cet ensemble de composants mérite-t-il l'attention? Tout le problème est sa simplicité et le fait qu'il n'y a rien de superflu qui crée un «bruit» informationnel. Cependant, il convient de noter qu'en raison du fait que cette bibliothèque n'est pas particulièrement prise en charge activement, elle doit être utilisée avec prudence.
7. Nachos UI
La bibliothèque
Nachos UI , qui compte environ 1 500 étoiles sur GitHub, offre aux développeurs un ensemble de plus de 30 composants personnalisés qui, en plus de les utiliser dans un environnement mobile dans le cadre des applications React Native, conviennent également pour développer des applications Web en utilisant
React- natif-web .
Nachos uiL'interface utilisateur de Nachos prend en charge les tests plus jolis, de fils et de plaisanteries. Cette belle bibliothèque bien écrite offre à toutes les personnes intéressées des designs intéressants et un gestionnaire de thème global.
8. React Native UI Library
Le travail sur le projet
React Native UI Library s'effectue sur
Wix . Il s'agit d'un ensemble d'outils ultra-modernes pour développer des interfaces utilisateur et une bibliothèque de composants pour React Native. La bibliothèque d'interface native React prend en charge, sans effort de programmation supplémentaire,
Reactive-Animatable et
React-Native-Blur .
React Native UI LibraryCette bibliothèque comprend un ensemble de préréglages de styles (parmi lesquels - Couleurs, Typographie, Ombres, Rayon de bordure et autres), qui sont traduits en modificateurs.
Voici un exemple d'utilisation de la bibliothèque d'interface native React.
9. React Native Paper
La bibliothèque de composants multiplateforme de
React Native Paper , avec environ 1 500 étoiles sur GitHub, suit les idées de Material Design de Google.
Réagissez au papier natifCet ensemble de composants prend en charge
les thèmes globaux . Si nécessaire, afin de vous débarrasser des modules inutilisés de cet ensemble, vous pouvez utiliser le plugin approprié pour babel.
Voici un exemple d'utilisation de React Native Paper.
10. Réagissez aux icônes vectorielles natives
Le projet
React Native Vector Icons , qui a rassemblé environ 10 000 étoiles sur GitHub, est une
vaste collection d' icônes personnalisées pour les applications React Native, pouvant être utilisées sur diverses plates-formes.
Réagir aux icônes vectorielles nativesLes icônes de React Native Vector Icons sont utilisées dans des milliers d'applications. Il est possible qu'ils vous soient utiles.
11. Ensemble de thé
La bibliothèque
Teaset , qui a collecté environ 1300 étoiles sur GitHub, comprend plus de 20 composants écrits en JS pur (ES6).
TeasetLe projet ne peut pas se vanter d'une documentation riche, mais la simplicité de ses composants, axés sur la satisfaction des besoins de base des applications React Native, et leur belle apparence, suggèrent que Teaset vaut au moins le coup d'œil.
Résumé
Au début de ce document, nous avons parlé du fait que React Native attire de plus en plus l'attention de la communauté des développeurs en raison de la prévalence de React et de la popularité des applications mobiles. Par conséquent, il n'est pas surprenant que le nombre de développements décents qui implémentent des ensembles de composants ou d'outils auxiliaires pour créer des applications basées sur React Native ne puisse pas être limité à ceux que nous avons examinés ci-dessus. Si vous recherchez quelque chose de similaire pour votre application React Native, voici quelques autres projets qui méritent une attention particulière:
Chers lecteurs! Si vous développez des applications mobiles basées sur React Native, veuillez nous indiquer les ensembles de composants et d'outils auxiliaires que vous utilisez pour cela.
