15 librerie di componenti nativi React che dovresti conoscere nel 2020

Reagire alle librerie dei componenti nativi che dovresti conoscere


Le librerie di componenti nativi di React possono farti risparmiare molto tempo quando lavori al tuo prossimo progetto di app. Come mai? Bene, iniziamo con React stesso. Probabilmente sai che React è una libreria JavaScript open source che aiuta a costruire interfacce utente sia per applicazioni basate sul Web che mobili. Include una serie di componenti che puoi usare prontamente per le tue app.

Di solito, durante la creazione di componenti in React, dovrai modellarli in modo da adattarli alle linee guida della piattaforma di destinazione. Ecco dove Reagisci nativo può aiutare. È un framework che puoi utilizzare per sviluppare app mobili utilizzando React insieme alle funzionalità native della piattaforma di destinazione.

In precedenza, abbiamo scritto un post con le migliori librerie e framework dei componenti dell’interfaccia utente. In questo post, daremo uno sguardo più da vicino alle librerie dei componenti di React Native in particolare.

Le migliori librerie di componenti nativi React dell’anno

1. NativeBase

Migliori librerie di componenti Native React n. 1: NativeBase

Se ti ritrovi a riscrivere i componenti di React per piattaforme diverse, dovresti provare NativeBase, un framework front-end dinamico. La libreria è una raccolta di componenti React Native essenziali multipiattaforma ed è un buon punto di partenza per iniziare a creare la tua app. I componenti sono costruiti con React Native combinato con alcune funzionalità JavaScript con proprietà personalizzabili. Puoi anche utilizzare qualsiasi libreria nativa di terze parti pronta all’uso.

NativeBase è completamente open-source e ha oltre 12.000 stelle Github. Tuttavia, i temi hanno un valore in quanto vengono aggiunte più funzionalità e schermate. NativeBase è ora disponibile per utenti web pure. Utilizzando la stessa base di codice JavaScript e lavorando con un design specifico della piattaforma per Android e iOS, puoi ottenere un aspetto nativo per la tua app. I loro progetti open source includono un’app iniziale nativa, un’app Clone di Twitter, un’app ToDo e un’app tutorial. Nel loro paniere premium troverai app per iniziare per prenotazioni, noleggi, annunci di lavoro, messaggi e altro ancora.

2. Material Kit React Native

Librerie n. 2 dei componenti migliori di React Native: material-kit-reagire-nativo

Material Kit React Native offre un modello di app nativo gratuito con design dei materiali. Costruito con il Quadro Galio, ridisegna i componenti più comuni per mantenere le cose minime ed essere in sintonia con il design dei materiali di Google. È facile da usare e include oltre 200 elementi artigianali come pulsanti, schede, navigazione e input. Tutti i componenti possono assumere variazioni di colore apportando modifiche al tema. Inoltre, ci sono cinque plugin personalizzati e cinque pagine di esempio.

Con quasi 200 stelle accese Github, offre un Versione Pro anche questo ti dà accesso a più pagine di esempio e documentazione.

3. Reagisci elementi nativi

Librerie n. 3 dei componenti migliori di React Native: reazioni-elementi-nativi

React Native Elements è un toolkit React Native UI multipiattaforma che riunisce in un unico posto una serie di fantastici componenti dell’interfaccia utente open source realizzati dagli sviluppatori. Puoi immergerti nei pacchetti messi insieme da React Native Elements ed essere sicuro che l’API abbia un aspetto coerente. Non sorprende che abbia ricevuto 17.000 stelle Github.

Il pacchetto include un intero paniere di componenti come prezzi, badge, overlay, divisori e barre di ricerca specifiche della piattaforma. Sono facili da usare e davvero personalizzabili. I puntelli per tutti i componenti sono definiti in un’unica posizione centrale, il che consente di aggiornare o modificare facilmente i componenti. Inoltre, può fungere da piattaforma per connettere piccoli team che sviluppano app commerciali React Native con contributo open source.

Per utilizzare React Native per i tuoi progetti basati sul Web, ecco Reagisci Web nativo. Consente la creazione di UI veloci e adattive in JavaScript e si integra con gli strumenti React Dev. Sarai in grado di condividere la tua base di codice tra le app React Native e le app web. Supporta digitare, fare clic o scorrere come modalità di input, ha l’accessibilità integrata e il supporto RTL ed è utilizzato da artisti del calibro di Twitter, Uber e Flipkart.

4. Lottie per React Native

Lottie

Lottie è una libreria di Airbnb per cellulari che ti aiuta ad aggiungere animazioni alle tue app. Normalmente, dopo aver creato le animazioni in Adobe After Effects, dovrai convertirle in un formato utilizzabile nella tua app web. Lottie ti aiuta in questo.

Funziona esportando i dati di animazione in formato JSON da un’estensione di After Effects, BodyMovin. Questa estensione è in bundle con un lettore JS per il rendering di animazioni sul web. Funziona anche con React Native e puoi accedere ai documenti ufficiali su Github dove ha raccolto quasi 12.000 stelle.

Le librerie e i plugin di Lottie lo sono disponibile gratuitamente, e puoi utilizzare la raccolta curata di file di animazione per rendere le tue app attraenti e interessanti. I file di animazione sono di piccole dimensioni e sono in formato vettoriale. Pertanto, non dovresti avere alcun impatto sulle prestazioni della tua app. Allo stesso tempo, può rendere più interessante l’interfaccia utente e renderla visivamente più accattivante.

5. Reagire icone vettoriali native

reagiscono-nativo-vector-icons

Questa è tra le migliori librerie di componenti React Native se quello che stai cercando sono alcune icone da utilizzare nelle tue app. Con una libreria di oltre 3000 icone sei praticamente sicuro di trovare qualcosa che soddisfi le tue esigenze. Inoltre, è possibile personalizzare, personalizzare ed estendere le icone integrandole nel progetto.

Il pacchetto supporta TabBar e Toolbar Android, nonché sorgente di immagini e font multi-stile. Con quasi 12.000 stelle accese Github, può adattarsi perfettamente a pulsanti, loghi e barre di navigazione. Si attinge La libreria animata di React Native combinandolo con qualsiasi icona per creare un componente animato. Se hai già un carattere icona con file CSS associato, puoi facilmente generare un’icona impostata con lo script generate-icon.

6. Accendi la CLI

Ignite

Ignite CLI è un kit di partenza solido per le app native di React. Senza alcun costo, la piastra di caldaia React Native predefinita ti aiuta facilmente a creare app native. Si installa facilmente e aderisce alle migliori pratiche nella sua costruzione, consentendo al contempo di adattare le piastre della caldaia al progetto. Funziona subito con Android e iOS. C’è supporto anche per i plugin standalone.

Inoltre, puoi scegliere tra un numero di piastre di caldaia o crearne una tua. Il sistema di plug-in modulare consente di aggiungere funzionalità dell’applicazione o di scrivere le proprie. Una schermata di esempio di utilizzo consente di testare librerie di terze parti e creare app costituite da più componenti. Lo schermo contiene anche esempi di app di uso comune costruite con componenti fondamentali. Per aiutarti a identificare i componenti e apportare facilmente modifiche, questa schermata registra anche gli esempi nei file del componente. Da questa schermata, è possibile testare, utilizzare e condividere componenti con il proprio team. Ignite CLI ha guadagnato oltre 10.000 stelle Github.

7. Reagisci nativo Mapview

reagiscono-nativo-mappe

Una delle librerie dei componenti di React Native che offre componenti di mappe per Android e iOS è React Native Mapview. La sua costruzione è tale che le caratteristiche regolari su qualsiasi mappa come marcatori e poligoni sono specificate come elementi secondari del componente Mapview. Ciò aiuta l’API a controllare in modo intuitivo le funzioni sulla mappa. Da parte tua, dovrai assicurarti di abilitare l’API di Google Maps nella console di Google.

Puoi fare molto per personalizzare lo stile della mappa. Sarai in grado di modificare la posizione della visualizzazione della mappa, il tracciamento della regione / posizione e di fare clic sui punti di interesse su Google Maps. È possibile abilitare lo zoom su indicatori o coordinate specificati o anche animarli. Se assegni un valore di regione animata all’elica, Mapview può utilizzare l’API animata per controllare il centro e lo zoom della mappa. A meno che non vengano specificati marcatori personalizzati, verranno visualizzati i marcatori predefiniti.

La cosa interessante è che i marcatori sono trascinabili, possono essere personalizzati utilizzando le immagini e aggiornano altre interfacce utente durante i trascini. Se hai bisogno di più, c’è un callout personalizzato per marcatori, creatori di poligoni e sovrapposizioni di cerchi e poligoni. Gli utenti iOS possono creare polilinee sfumate. Non sorprende che abbia oltre 10.000 stelle Github.

8. Reagisci chat nativa dotata

reagiscono-native-dotato-Chat

Come suggerisce il nome, React Native Gifted Chat ti aiuterà a configurare un’interfaccia utente della chat per React Native (e Web). Scritto con TypeScript, include componenti completamente personalizzabili che aiutano a caricare messaggi precedenti o a copiare messaggi negli appunti e altro ancora. C’è anche una InputToolbar che aiuta gli utenti a saltare la tastiera.

Per migliorare l’esperienza dell’utente, abilita Avatar come iniziali dell’utente, date localizzate, TextInput multilinea, messaggi di risposta rapida (bot) e messaggio di sistema. C’è anche supporto per Redux. La chat di talento ha più di 8.000 stelle Github.

9. React Native UI Kitten

reagiscono-native-ui-kitten

Una delle librerie dei componenti di React Native che può essere utilizzata come starter kit per app mobili per qualsiasi dominio, incluso l’eCommerce, è React Native UI Kitten – un’implementazione React Native del Sistema Eva Design. Con una valutazione di oltre 5.000 stelle Github, offre un set di circa 20 componenti per uso generale disegnati allo stesso modo per prendersi cura dell’aspetto visivo.

Con questa libreria per sempre gratuita e open source, è possibile utilizzare i temi forniti o creare altrettanti temi propri, il tutto senza modificare il codice sorgente dei componenti. Inoltre, puoi passare tra temi scuri e chiari in fase di runtime senza dover ricaricare la pagina. Dopo aver installato il pacchetto UI Kitten da NPM, puoi importare i componenti e iniziare a usarli nel tuo progetto.

10. Reagire carta nativa

reactnativepaper

Un’altra libreria gratuita e open source è React Native Paper. Ha tutti i componenti principali e questi componenti sono progettati in conformità con gli standard di progettazione dei materiali di Google.

La carta è multipiattaforma e funziona sia sul Web che sul cellulare. Esistono componenti e interazioni per soddisfare quasi tutti gli scenari di casi d’uso. La maggior parte dei dettagli, tra cui animazioni, accessibilità e logica dell’interfaccia utente, sono curati. Puoi personalizzare i colori predefiniti o crearne uno tuo. Inoltre, hai il pieno supporto tematico, oltre all’opzione per passare dalla modalità scura a quella chiara. Su Github, accumula oltre 4000 stelle.

11. Kit di materiali nativi React

reagire-native-materiale-kit

Il prossimo nel nostro elenco di librerie di componenti di React Native è l’ennesimo set di componenti dell’interfaccia utente che porta la progettazione del materiale in React Native. All’interno troverai pulsanti, carte, cursori di distanza e campi di testo. Vedrai anche spinner e barre di avanzamento per visualizzare il caricamento, nonché gli interruttori per gli interruttori, i pulsanti di opzione e le caselle di controllo.

Bastano poche righe di codice per aggiungere pulsanti usando i costruttori predefiniti che aderiscono al tema predefinito di Material design lite. Utilizzando il builder, puoi anche creare pulsanti personalizzati da zero. Lo stesso vale per i campi di testo integrati. Non solo, puoi personalizzare gli stili cambiando il tema globale. Ciò influirà su tutte le caselle di controllo e i pulsanti di opzione nell’intera app. Su Github, questa biblioteca raccoglie 4.700 stelle.

12. Reagire UI materiale nativo

reagire-native-materiale-ui

L’interfaccia utente del materiale nativo di React offre quasi 20 componenti per React Native. I componenti includono pulsanti di azione, avatar, sottotitoli, cassetti, divisori, barre degli strumenti e altro. Questi componenti sono altamente personalizzabili e utilizzano la progettazione dei materiali nella loro costruzione. Qualsiasi personalizzazione apportata al tema può essere estesa anche ad altri componenti, inclusi quelli creati dall’utente. Le modifiche locali possono essere apportate sostituendo gli stili laddove necessario.

Nel caso in cui utilizzi già React Native Vector Icons, non c’è molto da fare tramite l’installazione. Altrimenti, dovrai scaricare icone materiali per Android e assicurati di averlo fatto Roboto per iOS. Questa biblioteca ha guadagnato oltre 3000 stelle Github.

13. RNUILIB

rnuilib

Con oltre 60 componenti in questo kit, RNUILIB ha quasi 2000 stelle Github. Con esempi live inclusi per tutti i componenti, è possibile verificare le opzioni disponibili prima di utilizzarlo nel progetto.

Alcuni dei componenti sono: un’immagine animata, uno scanner per indicare l’avanzamento, avatar per visualizzare le immagini del profilo, pulsanti di base e componenti del dispositivo di scorrimento del gradiente.

14. Nachos UI

Nachos UI

Con oltre 30 componenti già pronti che puoi utilizzare con qualsiasi progetto JavaScript o React Native, l’interfaccia utente di Nachos ottiene oltre 1.900 stelle su Github. Ciò che aiuta davvero è che non devi preoccuparti troppo dello stile di qualsiasi componente. Tutto quello che devi fare è importare qualsiasi input pre-impostato da un componente a un altro. Dopo aver installato il kit dell’interfaccia utente di Nachos, selezionare qualsiasi componente desiderato, importare il codice React Native corrispondente e quindi continuare a personalizzarlo in base al progetto.

Questo software gratuito, open source e basato sulla community utilizza Avocode, uno strumento completo per condividere e ispezionare i progetti di Photoshop e Sketch. Grazie a Reagisci nativo per il web, puoi usarlo anche per progetti basati sul web.

15. ShoutEm

ShoutEm

Shoutem è una piattaforma di creazione di app che funziona utilizzando estensioni o blocchi modulari, un po ‘come costruire un sito Web con plugin su WordPress. Con oltre 40 estensioni complete, ha raccolto oltre 450 stelle Github. Le estensioni includono gallerie di foto e video, prodotti, eventi, menu di ristoranti e altro ancora. Puoi utilizzare queste estensioni open source liberamente nella tua app. E, semplicemente biforcendoli, puoi modificarli come preferisci.

Shoutem offre molti servizi di back-end mobile come analisi, autenticazione utente, layout, notifiche push e altro ancora. Inoltre, ci sono molti temi ben codificati che puoi usare e personalizzare. Shoutem utilizza JavaScript al 100% e React Native.

Bene, questa è la nostra lista delle migliori librerie di componenti nativi di React. Qual è la tua scelta? Condividi nei commenti.

Potresti anche essere interessato a questi articoli:

  • Modelli nativi gratuiti React per lo sviluppo di app

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 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