15 bibliothèques de composants natifs React à connaître en 2020

Réagissez aux bibliothèques de composants natifs que vous devez connaître


Les bibliothèques de composants React Native peuvent vous faire gagner beaucoup de temps lorsque vous travaillez sur votre prochain projet d’application. Comment venir? Eh bien, commençons par React lui-même. Vous savez probablement que React est une bibliothèque JavaScript open source qui aide à créer des interfaces utilisateur pour les applications Web et mobiles. Il comprend un certain nombre de composants que vous pouvez utiliser facilement pour vos applications.

Généralement, lors de la création de composants dans React, vous devrez les styliser en fonction des directives de la plate-forme que vous ciblez. C’est là que React Native peut aider. C’est un cadre que vous pouvez utiliser pour développer des applications mobiles en utilisant React avec les capacités natives de la plate-forme cible.

Plus tôt, nous avons écrit un article présentant les meilleures bibliothèques et cadres de composants d’interface utilisateur. Dans cet article, nous allons examiner de plus près les bibliothèques de composants React Native spécifiquement.

Meilleures bibliothèques de composants natifs React de l’année

1. NativeBase

Meilleures bibliothèques de composants natifs React # 1: NativeBase

Si vous vous retrouvez à réécrire des composants React pour différentes plates-formes, essayez-le avec NativeBase, un framework frontal dynamique. La bibliothèque est une collection de composants essentiels multiplateforme React Native et est un bon endroit pour commencer à créer votre application. Les composants sont construits avec React Native combiné avec certaines fonctionnalités JavaScript avec des propriétés personnalisables. Vous pouvez également utiliser n’importe quelle bibliothèque native tierce prête à l’emploi.

NativeBase est entièrement open-source et compte plus de 12 000 étoiles sur Github. Cependant, les thèmes sont privilégiés à mesure que davantage de fonctionnalités et d’écrans sont ajoutés. NativeBase est maintenant disponible pour utilisateurs Web aussi. En utilisant la même base de code JavaScript et en travaillant avec une conception spécifique à la plate-forme pour Android et iOS, vous pouvez obtenir une apparence native pour votre application. Leurs projets open source incluent une application de démarrage native, une application Twitter Clone, une application ToDo et une application tutoriel. Dans leur panier premium, vous trouverez des applications de démarrage pour la réservation, la location, les offres d’emploi, la messagerie, etc..

2. Kit de matériaux React Native

Bibliothèques de composants Best React Native # 2: material-kit-react-native

Material Kit React Native propose un modèle d’application native gratuit avec la conception de matériaux. Construit avec le Cadre Galio, il redessine les composants les plus courants pour garder les choses minimales et être en phase avec la conception matérielle de Google. Il est facile à utiliser et comprend plus de 200 éléments fabriqués à la main comme des boutons, des cartes, la navigation et des entrées. Tous les composants peuvent prendre des variations de couleur en modifiant le thème. De plus, il existe cinq plugins personnalisés et cinq pages d’exemple.

Avec près de 200 étoiles sur Github, il offre un Version Pro qui vous donne également accès à plus de pages d’exemples et de documentation.

3. Réagissez aux éléments natifs

Meilleures bibliothèques de composants natifs React # 3: react-native-elements

React Native Elements est une boîte à outils multiplateforme React Native UI qui rassemble en un seul endroit un grand nombre de composants UI open source conçus par les développeurs. Vous pouvez puiser dans les packages mis en place par React Native Elements et être sûr que l’API a une apparence cohérente. Il n’est pas surprenant qu’il ait reçu 17 000 étoiles sur Github.

Le package comprend un ensemble complet de composants tels que les barres de recherche spécifiques au prix, au badge, à la superposition, au séparateur et à la plateforme. Ils sont faciles à utiliser et vraiment personnalisables. Les accessoires pour tous les composants sont définis dans un emplacement central, ce qui permet de mettre à jour ou de modifier facilement les composants. De plus, il peut servir de plate-forme reliant de petites équipes développant des applications commerciales React Native avec une contribution open source.

Pour utiliser React Native pour vos projets Web, il existe React Native Web. Il permet la création d’interfaces utilisateur rapides et adaptatives en JavaScript et s’intègre aux outils React Dev. Vous pourrez partager votre base de code entre les applications React Native et les applications Web. Il prend en charge le type, cliquer ou glisser comme modes d’entrée, a une accessibilité intégrée et un support RTL, et est utilisé par des goûts de Twitter, Uber et Flipkart.

4. Lottie pour React Native

lottie

Lottie est une bibliothèque d’Airbnb pour mobiles pour vous aider à ajouter des animations à vos applications. Normalement, après avoir créé des animations dans Adobe After Effects, vous devrez les convertir en un format utilisable dans votre application Web. Lottie vous aide avec ça.

Il fonctionne en exportant des données d’animation au format JSON à partir d’une extension After Effects, BodyMovin. Cette extension est fournie avec un lecteur JS pour rendre les animations sur le Web. Il fonctionne également avec React Native, et vous pouvez accéder aux documents officiels sur Github où il a récolté près de 12 000 étoiles.

Les bibliothèques et plugins Lottie sont disponible gratuitement, et vous pouvez utiliser la collection organisée de fichiers d’animation pour rendre vos applications attrayantes et intéressantes. Les fichiers d’animation sont de petite taille et au format vectoriel. En tant que tel, vous ne devriez ressentir aucun impact sur les performances de votre application. En même temps, cela peut pimenter votre interface utilisateur et la rendre plus attrayante visuellement.

5. Réagir aux icônes vectorielles natives

réagir-native-icônes-vectorielles

Celui-ci est parmi les meilleures bibliothèques de composants React Native si vous recherchez des icônes à utiliser dans vos applications. Avec une bibliothèque de plus de 3 000 icônes, vous êtes presque sûr de trouver quelque chose qui répondra à vos besoins. De plus, il est possible de personnaliser, styliser et étendre les icônes tout en les intégrant dans votre projet.

Le package prend en charge TabBar et Toolbar Android, ainsi que la source d’image et la police multi-style. Avec près de 12 000 étoiles sur Github, il peut être parfaitement adapté aux boutons, logos et barres de navigation. Il s’appuie sur Bibliothèque animée de React Native en le combinant avec n’importe quelle icône pour créer un composant animé. Si vous avez déjà une police d’icônes avec un fichier CSS associé, vous pouvez facilement générer un jeu d’icônes avec le script generate-icon.

6. Ignite CLI

enflammer

Ignite CLI est un solide kit de démarrage pour les applications React Native. Sans frais, le passe-partout React Native par défaut vous aide sans effort à créer des applications natives. Il s’installe facilement et adhère aux meilleures pratiques dans sa construction, tout en vous permettant d’adapter les plaques de chaudière à votre projet. Prêt à l’emploi, il fonctionne à la fois avec Android et iOS. Il existe également un support pour les plugins autonomes.

De plus, vous pouvez choisir parmi un certain nombre de plaques chauffantes ou démarrer votre propre. Le système de plugin modulaire vous permet d’ajouter des fonctionnalités d’application ou d’écrire les vôtres. Un exemple d’écran d’utilisation vous aide à tester des bibliothèques tierces et à créer des applications composées de plusieurs composants. L’écran contient également des exemples d’applications couramment utilisées construites avec des composants fondamentaux. Afin de vous aider à identifier les composants et à les modifier facilement, cet écran enregistre également les exemples dans les fichiers du composant. Depuis cet écran, vous pouvez tester, utiliser et partager des composants avec votre équipe. Ignite CLI a gagné plus de 10 000 étoiles sur Github.

7. React Native Mapview

réagir-natif-cartes

React Native Mapview est l’une des bibliothèques de composants React Native qui propose des composants de carte pour Android et iOS. Sa construction est telle que les entités régulières sur n’importe quelle carte telles que les marqueurs et les polygones sont spécifiées en tant qu’enfants du composant Mapview. Cela aide l’API à contrôler de manière déclarative les fonctionnalités de la carte de manière intuitive. De votre côté, vous devrez vous assurer d’activer l’API Google Maps dans la console Google.

Vous pouvez faire beaucoup pour personnaliser le style de carte. Vous pourrez modifier la position de la vue de carte, la région / l’emplacement de suivi et rendre les points d’intérêt cliquables sur Google Maps. Vous pouvez activer le zoom avant sur les marqueurs ou coordonnées spécifiés, ou même les animer. Si vous attribuez une valeur de région animée à l’accessoire, Mapview peut utiliser l’API animée pour contrôler le centre et le zoom de la carte. Sauf si vous spécifiez des marqueurs personnalisés, les marqueurs par défaut seront rendus.

Ce qui est cool, c’est que les marqueurs sont déplaçables, peuvent être personnalisés à l’aide d’images et qu’ils mettent à jour d’autres interfaces utilisateur pendant les déplacements. Si vous en avez besoin de plus, il existe une légende personnalisée pour les marqueurs, les créateurs de polygones et les superpositions de cercles et de polygones. Les utilisateurs iOS peuvent créer des polylignes dégradées. Pas étonnant qu’il compte plus de 10000 étoiles sur Github.

8. Réagissez aux chats surdoués

réagir-chat-natif-doué

Comme son nom l’indique, React Native Gifted Chat vous aidera à configurer une interface utilisateur de chat pour React Native (et Web). Écrit avec TypeScript, il comprend des composants entièrement personnalisables qui aident à charger des messages antérieurs ou à copier des messages dans le presse-papiers et plus encore. Il y a aussi une InputToolbar qui aide les utilisateurs à sauter le clavier.

Pour améliorer l’expérience utilisateur, il active Avatar comme initiales de l’utilisateur, dates localisées, TextInput sur plusieurs lignes, messages de réponse rapide (bot) et message système. Il existe également un support pour Redux. Gifted Chat a plus de 8 000 étoiles sur Github.

9. React Native UI Kitten

réagir-natif-chaton-ui

L’une des bibliothèques de composants React Native qui peut être utilisée comme kit de démarrage pour les applications mobiles pour n’importe quel domaine, y compris le commerce électronique, est React Native UI Kitten – une implémentation React Native de la Système Eva Design. Avec une cote de 5000+ étoiles sur Github, il offre un ensemble d’environ 20 composants à usage général de la même manière pour prendre soin de l’apparence visuelle.

Avec cette bibliothèque open source et gratuite, vous pouvez utiliser les thèmes fournis ou créer autant de thèmes que vous le souhaitez, le tout sans changer le code source des composants. De plus, vous pouvez basculer entre les thèmes sombres et clairs pendant l’exécution sans avoir à recharger la page. Une fois que vous avez installé le package UI Kitten depuis NPM, vous pouvez importer les composants et commencer à les utiliser dans votre projet.

dix. React Native Paper

papier réactif

Une autre bibliothèque gratuite et open-source est React Native Paper. Il possède tous les principaux composants, et ces composants sont conçus conformément aux normes de conception des matériaux de Google.

Le papier est multiplateforme et fonctionne à la fois sur le Web et sur mobile. Il existe des composants et des interactions adaptés à presque tous les scénarios d’utilisation. La plupart des détails, y compris les animations, l’accessibilité et la logique de l’interface utilisateur, sont pris en charge. Vous pouvez personnaliser les couleurs par défaut ou créer les vôtres. De plus, vous avez un support complet de thème, ainsi que la possibilité de basculer entre les modes sombre et clair. Sur Github, il accumule plus de 4000 étoiles.

11. Kit de matériaux natifs React

kit de matériaux natifs réactifs

Le suivant sur notre liste de bibliothèques de composants React Native est un autre ensemble de composants d’interface utilisateur qui apporte la conception matérielle à React Native. À l’intérieur, vous trouverez des boutons, des cartes, des curseurs de plage et des champs de texte. Vous verrez également des filateurs et des barres de progression pour afficher le chargement, ainsi que des bascules pour les commutateurs, les boutons radio et les cases à cocher.

Il suffit de quelques lignes de code pour ajouter des boutons à l’aide de générateurs prédéfinis qui adhèrent au thème par défaut Material Design Lite. À l’aide du générateur, vous pouvez également créer des boutons personnalisés à partir de zéro. Il en va de même pour les champs de texte intégrés. Non seulement cela, vous pouvez personnaliser les styles en changeant le thème global. Cela affectera toutes les cases à cocher et tous les boutons radio de l’ensemble de l’application. Sur Github, cette bibliothèque recueille 4 700 étoiles.

12. Interface utilisateur React Native Material

réagir-natif-matériel-ui

L’interface utilisateur de React Native Material propose près de 20 composants pour React Native. Les composants comprennent des boutons d’action, des avatars, des sous-titres, des tiroirs, des séparateurs, des barres d’outils et plus encore. Ces composants sont hautement personnalisables et utilisent une conception matérielle dans leur construction. Toute personnalisation que vous apportez au thème peut également être étendue à d’autres composants, y compris ceux que vous créez vous-même. Des modifications locales peuvent être apportées en remplaçant les styles chaque fois que nécessaire.

Si vous utilisez déjà React Native Vector Icons, il n’y a pas grand-chose à faire en termes d’installation. Sinon, vous devrez télécharger icônes matérielles pour Android et assurez-vous d’avoir Roboto pour iOS. Cette bibliothèque a gagné plus de 3000 étoiles sur Github.

13. RNUILIB

rnuilib

Avec plus de 60 composants dans ce kit, RNUILIB horloge près de 2000 étoiles sur Github. Avec des exemples en direct inclus pour tous les composants, vous pouvez vérifier les options disponibles avant de l’utiliser dans votre projet.

Certains des composants sont: une image animée, un scanner pour indiquer la progression, des avatars pour afficher des images de profil, des boutons de base et des composants de curseur de dégradé.

14. Nachos UI

Nachos UI

Avec plus de 30 composants prêts à l’emploi que vous pouvez utiliser avec n’importe quel projet JavaScript ou React Native, l’interface utilisateur Nachos obtient plus de 1 900 étoiles sur Github. Ce qui aide vraiment, c’est que vous n’avez pas à vous soucier trop de styliser un composant. Tout ce que vous avez à faire est d’importer l’une des entrées prédéfinies d’un composant dans un autre. Après avoir installé le kit d’interface utilisateur Nachos, sélectionnez le composant de votre choix, importez le code React Native correspondant, puis personnalisez-le en fonction de votre projet.

Ce logiciel gratuit, open source et géré par la communauté utilise Avocode, un outil complet pour partager et inspecter les conceptions Photoshop et Sketch. Grâce à React Native pour le web, vous pouvez également l’utiliser pour des projets Web.

15. Shoutem

shoutem

Shoutem est une plate-forme de création d’applications qui fonctionne en utilisant des extensions ou des blocs de construction modulaires, un peu comme la construction d’un site Web avec des plugins sur WordPress. Avec plus de 40 extensions complètes, il a rassemblé plus de 450 étoiles sur Github. Les extensions incluent des galeries de photos et de vidéos, des produits, des événements, des menus de restaurants et plus encore. Vous pouvez utiliser ces extensions open source librement dans votre application. Et, en les bifurquant simplement, vous pouvez les modifier comme bon vous semble.

Shoutem propose de nombreux services back-end mobiles tels que l’analyse, l’authentification des utilisateurs, les mises en page, les notifications push et plus encore. De plus, il existe de nombreux thèmes bien codés que vous pouvez utiliser et personnaliser. Shoutem utilise 100% JavaScript et React Native.

Eh bien, c’est notre liste des meilleures bibliothèques de composants React Native. Lequel est votre choix? Partager dans les commentaires.

Vous pouvez également être intéressé par ces articles:

  • Modèles natifs React gratuits pour le développement d’applications

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map