15 Com a reacció de les biblioteques de components natius que heu de conèixer el 2020

Com haureu de conèixer les biblioteques de components natius que heu de conèixer


Reactiu les biblioteques de components natius que poden generar un estalvi de temps enorme quan treballeu en el vostre proper projecte d’aplicació. Com és que? Comencem amb React mateix. Probablement sabeu que React és una biblioteca JavaScript de codi obert que ajuda a crear interfícies d’usuari tant per a aplicacions basades en web com per a mòbils. Inclou diversos components que podeu utilitzar fàcilment per a les vostres aplicacions.

Normalment, mentre creeu components a React, haureu d’estilar-los perquè s’ajustin a les directrius de la plataforma que esteu orientant. És aquí Reacciona al natiu Puc ajudar. És un marc que podeu utilitzar per desenvolupar aplicacions mòbils mitjançant React, juntament amb les capacitats natives de la plataforma de destinació.

Anteriorment, vam escriure una publicació amb les millors biblioteques de components de la interfície d’usuari. En aquesta publicació, analitzarem de forma específica les biblioteques de components reactius natives.

Les millors biblioteques de components natives de l’any

1. NativeBase

Millors reaccions de les biblioteques de components natives # 1: NativeBase

Si us trobeu reescrivint components React per a diferents plataformes, hauríeu de fer-ho amb NativeBase, un marc de front-end dinàmic. La biblioteca és una col·lecció de components essencials React Native multiplataforma i és un bon lloc per començar a crear la vostra aplicació. Els components estan construïts amb React Native combinats amb algunes funcionalitats de JavaScript amb propietats personalitzables. També podeu utilitzar totes les biblioteques natives de tercers fora del quadre.

NativeBase és completament de codi obert i té 12.000 estrelles més Github. Tanmateix, els temes són excel·lents a mesura que s’afegeixen més funcions i pantalles. NativeBase ja està disponible per a usuaris web també Utilitzant la mateixa base de codi JavaScript i treballant amb un disseny específic per a plataforma per a Android i iOS, podeu obtenir un aspecte propi per a la vostra aplicació. Els seus projectes de codi obert inclouen una aplicació d’iniciació nativa, una aplicació Twitter Clone, una aplicació ToDo i una aplicació de tutorial. A la cistella de primera categoria, trobareu aplicacions d’inici per reservar, llogar, llistats de treballs, missatgeria i molt més.

2. Material kit Reactiu natiu

Les millors biblioteques de components natives React # 2: native-kit-react-native

Material Kit React Native ofereix una plantilla d’aplicació nativa gratuïta amb disseny de material. Construït amb el Marc Galio, redissenya els components més comuns per tal de mantenir les coses mínimes i estar en sintonia amb el disseny material de Google. És fàcil d’utilitzar i inclou més de 200 elements artesanals com botons, targetes, navegació i entrades. Tots els components poden adoptar variacions de color fent canvis al tema. A més, hi ha cinc plugins personalitzats i cinc pàgines d’exemple.

Amb prop de 200 estrelles encesa Github, ofereix un Versió Pro també us permet accedir a més exemples de pàgines i documentació.

3. Reacciona elements originaris

Les millors biblioteques de components natives del número 3: react-native-elements

React Native Elements és un conjunt d’eines React Native UI multiplataforma que reuneix en un mateix lloc diversos components de la interfície d’usuari de codi obert realitzats per desenvolupadors. Podeu submergir-vos en els paquets que reuneixen React Native Elements i assegureu-vos que l’API té un aspecte i un aspecte coherents. No és estrany que hagin rebut 17.000 estrelles Github.

El paquet inclou tota una cistella de components com ara les tarifes, les insígnies, les superposicions, les divisions i les barres de cerca específiques de la plataforma. Són fàcils d’utilitzar i realment personalitzables. Els accessoris de tots els components es defineixen en una ubicació central, cosa que permet actualitzar o modificar components fàcilment. A més, pot servir de plataforma que connecta equips petits que desenvolupen aplicacions comercials React Native amb aportació de codi obert.

Per utilitzar React Native per als vostres projectes basats en la web, hi ha Reacciona al lloc web natiu. Permet crear interfícies d’interès ràpides i adaptables a JavaScript i s’integra amb les eines React Dev. Podreu compartir la vostra base de codi entre les aplicacions de React Native i les aplicacions web. És compatible amb els tipus d’introducció, fan clic o es desl·liden, té accessibilitat integrada i suport RTL, i s’utilitza com Twitter, Uber i Flipkart.

4. Lottie per a React Native

Lottie

Lottie és una biblioteca d’Airbnb per a mòbils per ajudar-vos a afegir animacions a les vostres aplicacions. Normalment, després de crear animacions a Adobe After Effects, haureu de convertir-les en un format utilitzable a la vostra aplicació web. Lottie t’ajuda amb això.

Funciona exportant dades d’animació en format JSON des d’una extensió After Effects, BodyMovin. Aquesta extensió s’inclou amb un reproductor JS per reproduir animacions al web. Funciona també amb React Native i podeu accedir als documents oficials Github on ha acumulat prop de 12.000 estrelles.

Les biblioteques i plugins de Lottie són disponible gratuïtament, i podeu utilitzar la col·lecció curatada de fitxers d’animació per fer les vostres aplicacions atractives i interessants. Els fitxers d’animació són de mida petita i són en format vectorial. Per tant, no hauria de tenir cap impacte en el rendiment de l’aplicació. Al mateix temps, pot augmentar la vostra interfície d’usuari i fer-la més atractiva visualment.

5. Reacciona les icones vectorials natives

react-native-vector-icons

Aquesta és una de les millors biblioteques de components de reacció nativa si el que estàs buscant són algunes icones per utilitzar a les aplicacions. Amb una biblioteca de més de 3.000 icones, segur que trobareu alguna cosa que s’ajusti a les vostres necessitats. A més, és possible personalitzar, dissenyar i ampliar les icones mentre s’integren al vostre projecte.

El paquet és compatible amb TabBar i la barra d’eines d’Android, a més de font d’imatge i tipus de lletra d’estil multi. Amb prop de 12.000 estrelles Github, pot ser perfecte per a botons, logotips i barres de navegació. Es basa Reacciona la biblioteca animada de Native combinant-la amb qualsevol icona per crear un component animat. Si ja teniu un tipus de lletra d’icona amb el fitxer CSS associat, podeu generar fàcilment un conjunt d’icones amb l’escriptura de generar icones.

6. Igniteu el CLI

encendre

Ignite CLI és un kit d’inici sòlid per a les aplicacions React Native. Sense costos, la placa de caldera React Native per defecte t’ajuda sense esforç a crear aplicacions natives. S’instal·la fàcilment i s’adhereix a les millors pràctiques en la seva construcció, alhora que permet adaptar les plaques de la caldera al vostre projecte. Funciona amb Android i iOS. També hi ha assistència per a plugins autònoms.

A més, podeu triar entre diverses plaques de calor i començar la vostra. El sistema de connectors modular us permet afegir funcions d’aplicació o escriure les vostres. Una pantalla d’exemple d’ús us ajuda a provar biblioteques de tercers i a crear aplicacions formades per diversos components. La pantalla també conté exemples d’aplicacions d’ús comú construïdes amb components fonamentals. Per ajudar-vos a identificar els components i fer-ne canvis, aquesta pantalla també registra els exemples als fitxers del component. Des d’aquesta pantalla, podeu provar, utilitzar i compartir components amb el vostre equip. Ignite CLI ha aconseguit més de 10.000 estrelles Github.

7. Reacciona la visualització de mapes nativa

react-native-maps

Una de les biblioteques de components React Native que ofereix components de mapa per a Android i iOS és React Native Mapview. La seva construcció és tal que les característiques habituals de qualsevol mapa, com ara marcadors i polígons, s’especifiquen com a fills del component Mapview. Això ajuda a l’API a controlar de manera intuïtiva les funcions del mapa. Per part vostra, haureu d’assegurar-vos que activeu l’API de Google Maps a la consola de Google.

Hi ha molt per fer per personalitzar l’estil del mapa. Podreu canviar la posició de la vista de mapes, fer el seguiment de la regió / ubicació i fer que els punts d’interès es facin clic a Google Maps. Podeu activar el zoom a marcadors o coordenades especificades, o fins i tot animar-los. Si assigneu un valor de regió animada a l’atrezzo, Mapview pot utilitzar l’API animada per controlar el centre i el zoom del mapa. Si no especifiqueu marcadors personalitzats, es marcaran els marcadors predeterminats.

El més fantàstic és que els marcadors es puguin arrossegar, es poden personalitzar mitjançant imatges i actualitzen altres interfícies d’interès durant l’arrossegament. Si en necessiteu més, hi ha una trucada personalitzada per als marcadors, els creadors de polígons i les superposicions de cercles i polígons. Els usuaris d’iOS poden crear polilines de gradient. No és estrany que tingui més de 10.000 estrelles encès Github.

8. Com a reacció al xat dotat amb nadius

xat de reacció-nadiu-talentós

Tal com el seu nom indica, el xat dotat de reacció nativa us ajudarà a configurar una interfície d’interès de xat per a reaccionar natiu (i web). Escrit amb TypeScript, inclou components totalment personalitzables que ajuden a carregar missatges anteriors o copiar missatges al porta-retalls i molt més. Hi ha una barra d’InputTool que també ajuda els usuaris a saltar el teclat.

Per millorar l’experiència de l’usuari, permet Avatar com a inicials de l’usuari, dates localitzades, TextInput de diverses línies, missatges de resposta ràpida (bot) i missatges del sistema. També hi ha assistència per a Redux. El xat dotat té més de 8.000 estrelles Github.

9. Reacciona a la gateta nativa d’IU

react-native-ui-kitten

Una de les biblioteques de components React Native que es poden utilitzar com a kit d’inici per a aplicacions mòbils de qualsevol domini, inclòs el comerç electrònic, és React Native UI Kitten – una implementació React Native de la Sistema de disseny Eva. Amb una qualificació superior a 5.000 estrelles Github, Ofereix un conjunt d’uns 20 components d’ús general dissenyats de la mateixa manera per tenir cura de l’aspecte visual.

Amb aquesta biblioteca de codi obert i sempre lliure, podeu utilitzar els temes proporcionats o crear tants temes propis, tot sense canviar el codi font dels components. A més, podeu canviar entre temes foscos i clars durant el temps d’execució sense necessitat de tornar a carregar la pàgina. Un cop instal·lat el paquet UI Kitten des de NPM, podeu importar-ne els components i començar a utilitzar-los al vostre projecte.

10. Reacciona el paper natiu

paper reactiu

Una altra biblioteca gratuïta i de codi obert és React Native Paper. Disposa de tots els components principals i està dissenyat d’acord amb els estàndards de disseny de materials de Google.

El paper és multiplataforma i funciona tant a la web com al mòbil. Hi ha components i interaccions que s’adapten a gairebé tots els escenaris de casos d’ús. Es tenen cura de la majoria de detalls, incloses animacions, accessibilitat i lògica de la interfície d’usuari. Podeu personalitzar els colors predeterminats o fer-ne el vostre. A més, teniu un suport de temàtica complet, a més de l’opció de canviar de mode fosc a la llum. Encès Github, acumula més de 4.000 estrelles.

11. Reacciona amb el material natiu

react-native-material-kit

A continuació, a la nostra llista de biblioteques de components React Native, encara hi ha un altre conjunt de components d’UI que aporta el disseny de material a React Native. Al seu interior, hi trobareu botons, targetes, lliscadors de gamma i camps de text. També veureu les barres de rotació i les barres de progrés per mostrar la càrrega, a més de canviar els interruptors, els botons de ràdio i les caselles de selecció..

Només cal que hi hagi algunes línies de codi per afegir botons mitjançant constructors predefinits que s’adhereixin al tema predeterminat de Material design lite. Mitjançant el creador, també podeu crear botons personalitzats des de zero. El mateix passa amb els camps de text integrats. No només això, podeu personalitzar els estils canviant el tema global. Això afectarà totes les caselles de selecció i els botons de ràdio a tota l’aplicació. Encès Github, aquesta biblioteca guanya 4.700 estrelles.

12. Reacció a la interfície d’usuari del material natiu

react-native-material-ui

La interfície d’interès de React Native Material ofereix prop de 20 components per a React Native. Els components inclouen botons d’acció, avatars, subtítols, calaixos, divisors, barres d’eines i molt més. Aquests components són altament personalitzables i utilitzen el disseny de materials en la seva construcció. Qualsevol personalització que feu al tema es pot estendre a altres components també, incloent-hi qualsevol que creeu pel vostre compte. Els canvis locals es poden fer sobreescrivint estils allà on sigui necessari.

En cas que ja utilitzeu les icones vectorials de Reactivació nativa, no hi ha moltes coses a fer per instal·lació. Altrament, haureu de descarregar icones de material per a Android i assegureu-vos que en tingueu Roboto per a iOS. Aquesta biblioteca ha guanyat més de 3.000 estrelles Github.

13. RNUILIB

rnuilib

Amb més de 60 components d’aquest kit, RNUILIB rellotja prop de 2.000 estrelles Github. Amb exemples en directe inclosos per a tots els components, podeu consultar les opcions disponibles abans d’utilitzar-lo al vostre projecte.

Alguns dels components són: una imatge animada, un escàner per indicar el progrés, els avatars per mostrar imatges de perfil, els botons bàsics i els components del control lliscant.

14. Interfície d’usuari de Nachos

Interfície d'usuari de Nachos

Amb 30+ components ja preparats que podeu utilitzar amb qualsevol projecte de JavaScript o React Native, la interfície d’usuari de Nachos té més de 1.900 estrelles més Github. El que realment ajuda és que no us hagueu de preocupar gaire per dissenyar cap component. Tot el que heu de fer és importar alguna de les entrades prèviament dissenyades d’un component a un altre. Després d’instal·lar el kit de l’UI Nachos, seleccioneu qualsevol component que desitgeu, importeu el corresponent codi de reacció nativa i després aneu a personalitzar-lo per adaptar-se al vostre projecte..

Aquest programari gratuït, de codi obert i impulsat per la comunitat, utilitza Avocode, una eina totalment característica per compartir i inspeccionar dissenys de Photoshop i Sketch. Gràcies a Reactiu natiu per a la web, també podeu utilitzar-lo per a projectes web.

15. Crit

crit

Shoutem és una plataforma d’aplicació d’aplicacions que funciona mitjançant extensions o blocs de construcció modulars, com si fos la creació d’un lloc web amb plugins a WordPress. Amb més de 40 extensions completes, es van reunir més de 450 estrelles Github. Les extensions inclouen galeries de fotos i vídeos, productes, esdeveniments, menús de restaurants i molt més. Podeu utilitzar aquestes extensions de codi obert lliurement a l’aplicació. I, simplement sense oblidar-les, podeu modificar-les com vulgueu.

Shoutem ofereix molts serveis de serveis mòbils com ara anàlisis, autenticació d’usuaris, dissenys, notificacions push i molt més. A més, hi ha molts temes ben codificats per utilitzar i personalitzar. Shoutem utilitza JavaScript 100% i React Native.

Doncs bé, aquesta és la nostra llista de les millors biblioteques de components autòctons. Quina és la vostra elecció? Compartiu els comentaris.

També us pot interessar aquests articles:

  • Plantilles natives de reacció gratuïta per al desenvolupament d’aplicacions

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

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