Saltar al contenido

11 bibliotecas de componentes nativos de React que debe conocer en 2019

Con la creciente popularidad de React y el aumento del desarrollo de aplicaciones móviles nativas (y PWA), no es sorprendente que React-Native esté obteniendo más adopción en la comunidad todos los días.
Al igual que React, React Native te anima a crear tu interfaz de usuario utilizando componentes aislados. Las bibliotecas de componentes y los kits de herramientas de la interfaz de usuario le ayudan a ahorrar tiempo y a crear sus aplicaciones más rápido, utilizando un conjunto de componentes prefabricados.
Después de revisar las bibliotecas de componentes útiles de React y Vue, y bajo demanda popular, aquí hay una lista de bibliotecas de interfaz de usuario nativas de React útiles (mantenidas) para que pueda comenzar. ¡No dudes en comentar y añadir tus propias sugerencias!
Puede combinar las bibliotecas React UI con Bit ** para compartir y reutilizar fácilmente componentes entre aplicaciones. Descubra y organice componentes para compilar más rápido con su equipo y manténgalos sincronizados en todos los proyectos. Darle una oportunidad.

Descubrimiento y colaboración de componentes · Bit

1. NativeBase

Con 10k estrellas y más de 1k bifurcaciones, NativeBase es una biblioteca de componentes de interfaz de usuario muy popular que proporciona docenas de componentes multiplataforma para React native. Al usar NativeBase, puede usar cualquier biblioteca nativa de terceros lista para usar y el proyecto en sí viene con un rico ecosistema a su alrededor, desde útiles kits de inicio hasta plantillas de temas personalizables. Aquí tienes un buen kit de inicio.

GeekyAnts / NativeBase

2. Reaccionar elementos nativos

Con más de 12k estrellas, react-native-elements es un kit de herramientas de interfaz de usuario multiplataforma altamente personalizable construido completamente en Javascript. Los autores de la biblioteca afirman que ” La idea con React Native Elements tiene más que ver con la estructura de los componentes que con el diseño real, lo que significa menos repetición en la configuración de ciertos elementos pero control total sobre su diseño “ , lo que debería hacerlo atractivo tanto para los nuevos desarrolladores como para los veteranos experimentados. Aquí hay un ejemplo de la aplicación Expo que muestra todos los componentes en acción. Siéntete libre de participar.

react-native-training / react-native-elements

3. Shoutem

Con 3.5k estrellas, Shoutem es un kit de interfaz de usuario de React Native que consta de 3 partes: componentes de interfaz de usuario, temas y animación de componentes. La biblioteca proporciona un conjunto de componentes multiplataforma para iOS y Android, y todos los componentes están diseñados para ser componibles y personalizables. Cada componente también tiene un estilo predefinido que es consistente con el resto, lo que hace posible construir componentes complejos sin definir estilos complejos manualmente.

Kit de herramientas de interfaz de usuario de Shoutem

4. Gatito UI

Con 3k estrellas, esta biblioteca proporciona un kit de componentes nativos de reacción personalizable y reutilizable basado en el concepto de mover definiciones de estilo a un lugar específico, lo que hace que los componentes sean reutilizables y con estilo de una sola manera. Los temas se pueden cambiar fácilmente “sobre la marcha” pasando un conjunto diferente de variables. Aquí hay una buena aplicación de la Expo para mirar a su alrededor.

akveo / react-native-ui-kitten

5. Reaccionar la interfaz de usuario de material nativo

Una biblioteca de 2k estrellas con un conjunto de componentes de interfaz de usuario altamente personalizables que implementan el diseño de materiales de Google. Tenga en cuenta que la biblioteca utiliza un único objeto JS llamado uiTheme que se pasa a través del contexto para una máxima personalización. De forma predeterminada, este objeto uiTheme se basa en el lightTheme que puede encontrar aquí. Aquí hay una lista de los componentes de la biblioteca con ejemplos visuales.

xotahal / react-native-material-ui

6. Kit React Native Material

Aunque la última publicación de NPM fue en diciembre de 2017, esta biblioteca de 4k estrellas aún merece una mención con un conjunto básico pero útil de componentes y temas de interfaz de usuario que implementan el MD de Google. ¿Por qué? porque es simple, útil y tiene poco “ruido” circundante. Debido al mantenimiento relativamente bajo, utilícelo con precaución.

xinthink / react-native-material-kit

7. Interfaz de usuario de Nachos

Con 1.5k estrellas, Nachos UI es una biblioteca de componentes React Native con más de 30 componentes personalizables que también funcionan en la web gracias a react-native-web. Con la prueba de instantáneas de broma, más bonita y compatible con hilos, esta biblioteca cuidadosamente elaborada ofrece un diseño picante y un administrador de temas global. ¡Lindo!

nachos-ui / nachos-ui

8. React Native UI Library

La ingeniería de Wix está trabajando en este conjunto de herramientas de interfaz de usuario y biblioteca de componentes de última generación para React native (demo) que también admite react-native-animatable y react-native-blur listo para usar. La biblioteca viene con un conjunto predefinido de ajustes preestablecidos de estilo (que se traducen en modificadores) que incluyen colores, tipografía, sombras, radio de borde y más. Echar un vistazo.

wix / react-native-ui-lib

9. Reaccionar papel nativo

Con casi 1.5K estrellas, React Native Paper es una biblioteca de componentes de interfaz de usuario multiplataforma que sigue las pautas de diseño de materiales, con soporte de temática global y un complemento babel opcional para reducir el tamaño del paquete. Aquí hay una aplicación de ejemplo de la Expo para ayudarlo a comprender rápidamente la idea.

pila de llamadas / react-native-paper

10. Reaccionar iconos vectoriales nativos

Con casi 10k estrellas, esta biblioteca es, bueno, un conjunto de íconos personalizables para React nativo con soporte para NavBar / TabBar / ToolbarAndroid, fuente de imagen y estilo completo. Como era de esperar, es extremadamente útil y utilizado por miles de aplicaciones, así como por otras bibliotecas de componentes de la interfaz de usuario (como react-native-paper). La biblioteca proporciona conjuntos de iconos empaquetados prefabricados listos para usar, y aquí hay ejemplos completos de todos los iconos de la biblioteca.

oblador / react-native-vector-icons

11. Teaset

Con 1.3k estrellas, Teaset es una biblioteca de interfaz de usuario para reaccionar nativa con más de 20 componentes JS (ES6) puros, que se centra en la visualización de contenido y el control de acciones. La documentación es escasa (en el mejor de los casos), pero su simplicidad y diseño cautivaron mi atención. Echar un vistazo.

rilyu / teaset

Menciones honoríficas

También puede encontrar estos útiles, pero algunos no se han mantenido, así que utilícelos con cuidado.

Trixieapp / react-virgen

infinito / encender

bartonhammond / copo de nieve

panza-org / panza

binggg / señor

Diseño de Facebook – GUI de iPhone iOS 10

Trixieapp / react-virgen

wix / react-native-calendars

oblador / react-native-progress

maxs15 / react-native-spinkit

react-community / lottie-react-native

react-native-material-design / react-native-material-design

Aprende más

Diseño atómico con React y Bit: simplifique una interfaz de usuario compleja

5 herramientas para un desarrollo más rápido en React

¿Qué es una PWA y por qué debería importarle?

Este contenido se publicó originalmente aquí.