A principios de año, publicamos varios materiales sobre conjuntos de componentes populares para
React ,
Angular y
Vue . Hoy traemos a su atención una traducción de un artículo de la misma serie sobre React Native. Dada la continua popularidad de React, y el hecho de que las aplicaciones móviles y
PWA se están volviendo más populares, no es sorprendente que
React Native atraiga cada vez más atención de la comunidad de desarrolladores.
El marco React Native es muy similar a React en que su aplicación alienta al programador a crear interfaces de usuario utilizando componentes aislados. Los kits de dichos componentes, diseñados para el desarrollo de interfaces, proporcionan a los desarrolladores módulos listos para usar, cuyo uso ayuda a ahorrar tiempo al acelerar el trabajo. Aquí discutimos once conjuntos de componentes que están bien respaldados por sus creadores. Espero que sean útiles para cualquiera que tenga que desarrollar interfaces en React Native.
1. NativeBase
NativeBase es un conjunto multiplataforma de componentes de interfaz de usuario para React Native.
NativebaseLa gran popularidad de NativeBase se indica por el hecho de que este proyecto obtuvo alrededor de 10 mil estrellas en GitHub, y que tiene alrededor de mil tenedores. NativeBase pone docenas de componentes multiplataforma a disposición de los programadores. Al usar NativeBase, puede, sin esfuerzos adicionales, usar cualquier biblioteca nativa de terceros, y alrededor de este proyecto hay un extenso ecosistema en el que hay muchas cosas útiles, desde
herramientas para crear proyectos básicos hasta
herramientas para desarrollar temas que sirven para configurar externos Vista de los componentes de NativeBase.
2. Reaccionar elementos nativos
El conjunto de componentes multiplataforma
React Native Elements ha reunido alrededor de 12 mil estrellas en GitHub. Los componentes de este conjunto completo de JavaScript son altamente personalizables.
Reaccionar elementos nativosLos autores del kit
dicen que lo más importante en React Native Elements es la estructura de los componentes, no su diseño. Esto significa que para configurar un componente y prepararlo para el trabajo, se necesita muy poco código de plantilla. Al mismo tiempo, quien usa estos componentes tiene la oportunidad de controlar completamente su apariencia. Tal enfoque de los componentes puede atraer la atención de amplios niveles de programadores web, desde principiantes hasta experimentados.
Aquí hay una aplicación de demostración construida sobre la base de React Native Elements, con la que puede ver los componentes de este kit en acción.
3. Shoutem UI Toolkit
El
kit de herramientas de desarrollo de la interfaz
Shoutem , que ha reunido unas 3.500 estrellas en GitHub, consta de tres partes. Estos son
componentes de la interfaz de usuario,
temas y
animaciones de componentes.
ShoutemShoutem ofrece a los desarrolladores un conjunto de componentes multiplataforma diseñados para iOS y Android. Todos los componentes se crean teniendo en cuenta la posibilidad de su uso conjunto. Su apariencia puede ser
personalizada . Cada componente también tiene un estilo estándar consistente con el estilo de los otros componentes. Esto hace posible crear componentes complejos sin la necesidad de configurar manualmente sistemas de estilo complejos.
4. UI Kitten
El kit de componentes
UI Kitten , propietario de aproximadamente 3.000 estrellas en GitHub, pone a disposición del desarrollador React Native-components que son altamente personalizables y adecuados para su reutilización.
Gatito uiUI Kitten se basa en la idea de mover definiciones de estilo a una ubicación específica, lo que ayuda a reutilizar componentes y facilita la personalización de su apariencia. Los temas aplicados a los componentes son bastante fáciles de cambiar, ya que dicen, sobre la marcha, pasándoles diferentes conjuntos de variables.
Aquí hay un proyecto de demostración, al experimentar con el cual, puedes conocer mejor a UK Kitten.
5. Reaccionar la interfaz de usuario de material nativo
El proyecto de
interfaz de usuario React Native Material , que tiene cerca de 2.000 estrellas en GitHub, proporciona al desarrollador web un conjunto de componentes de interfaz de usuario que implementan las ideas de diseño de materiales de Google y son personalizables. Al trabajar con la interfaz de usuario React Native Material, vale la pena considerar que esta biblioteca utiliza un solo objeto JS llamado
uiTheme , que, para garantizar el máximo nivel de personalización, se pasa a través del contexto.
Reaccionar interfaz de usuario de material nativoPor defecto, el objeto
uiTheme basa en el tema
lightTheme , que se puede encontrar
aquí . Y
aquí hay una lista de componentes de la biblioteca con ejemplos de su uso.
6. Reaccionar kit de material nativo
Aunque
React Native Material Kit se publicó en NPM en diciembre de 2017, vale la pena prestar atención a este conjunto de componentes, con aproximadamente 4 mil estrellas en GitHub.
Reaccionar kit de material nativoEl React Native Material Kit ofrece al desarrollador una colección de componentes y temas de interfaz de usuario simples y convenientes que implementan el concepto Google Material Design de Google. ¿Por qué merece la pena este conjunto de componentes? El punto es su simplicidad y el hecho de que no hay nada superfluo que cree un "ruido" informativo. Sin embargo, debe tenerse en cuenta que debido a que esta biblioteca no es particularmente activa, debe usarse con precaución.
7. Nachos UI
La biblioteca
Nachos UI , que tiene alrededor de 1,500 estrellas en GitHub, ofrece a los desarrolladores un conjunto de más de 30 componentes personalizados que, además de usarlos en un entorno móvil como parte de las aplicaciones React Native, también son adecuados para desarrollar aplicaciones web usando
react- web nativaNachos uiNachos UI admite pruebas más bonitas, de hilo y bromas. Esta biblioteca agradable y bien escrita ofrece a todas las personas interesadas diseños interesantes y un administrador de temas global.
8. Reaccionar biblioteca nativa de la interfaz de usuario
El trabajo en el proyecto
React Native UI Library se realiza en
Wix . Es un conjunto ultramoderno de herramientas para desarrollar interfaces de usuario y una biblioteca de componentes para React Native. La biblioteca React Native UI admite, sin esfuerzo de programación adicional,
react-native-animatable y
react-native-blur .
Reaccionar biblioteca nativa de la interfaz de usuarioEsta biblioteca incluye un conjunto de ajustes preestablecidos de estilos (entre ellos: colores, tipografía, sombras, borde de radio y otros), que se traducen en modificadores.
Aquí hay un ejemplo usando la Biblioteca React Native UI.
9. Reaccionar papel nativo
La biblioteca de componentes multiplataforma de
React Native Paper , con aproximadamente 1.500 estrellas en GitHub, sigue las ideas de diseño de materiales de Google.
Reaccionar papel nativoEste conjunto de componentes admite
temas globales . Si es necesario, para deshacerse de los módulos no utilizados de este conjunto, puede usar el complemento apropiado para babel.
Aquí hay un ejemplo usando React Native Paper.
10. Reaccionar iconos vectoriales nativos
El proyecto
React Native Vector Icons , que ha reunido alrededor de 10 mil estrellas en GitHub, es una
extensa colección de iconos personalizados para aplicaciones React Native, adecuadas para su uso en varias plataformas.
Reaccionar iconos vectoriales nativosLos iconos de React Native Vector Icons se utilizan en miles de aplicaciones. Es posible que te sean útiles.
11. Teaset
La biblioteca
Teaset , que ha recolectado alrededor de 1300 estrellas en GitHub, incluye más de 20 componentes escritos en JS puro (ES6).
TeasetEl proyecto no puede presumir de una rica documentación, pero la simplicidad de sus componentes, enfocados en satisfacer las necesidades básicas de las aplicaciones React Native, y su agradable apariencia, sugieren que al menos vale la pena echar un vistazo a Teaset.
Resumen
Al comienzo de este material, hablamos sobre el hecho de que React Native está atrayendo cada vez más atención de la comunidad de desarrolladores debido a la prevalencia de React y la popularidad de las aplicaciones móviles. Por lo tanto, no es sorprendente que el número de desarrollos decentes que implementan conjuntos de componentes o herramientas auxiliares para crear aplicaciones basadas en React Native no se pueda limitar a los que examinamos anteriormente. Si está buscando algo similar para su aplicación React Native, aquí hay algunos proyectos más a los que vale la pena prestarles atención:
Estimados lectores! Si está desarrollando aplicaciones móviles basadas en React Native, díganos qué conjuntos de componentes y herramientas auxiliares utiliza para esto.
