15 React Native knjižnica komponenata koje biste trebali znati 2020. godine

15 React Native knjižnica komponenata koje biste trebali znati 2020. godine

15 React Native knjižnica komponenata koje biste trebali znati 2020. godine
СОДЕРЖАНИЕ
02 июня 2020

Reagirajte knjižnice izvornih komponenti koje biste trebali znati


Biblioteke komponenata React Native mogu vam uštedjeti vrijeme dok radite na sljedećem projektu aplikacije. Kako to? Započnimo s samim Reactom. Vjerojatno znate da je React JavaScript knjižnica otvorenog koda koja pomaže u izgradnji korisničkih sučelja i za web i mobilne aplikacije. Uključuje brojne komponente koje lako možete koristiti za svoje aplikacije.

Prilikom izrade komponenti u Reactu morat ćete ih oblikovati kako bi odgovarali smjernicama platforme na koju ciljate. To je gdje Reagirati Native mogu pomoći. To je okvir koji možete koristiti za razvoj mobilnih aplikacija koristeći React zajedno s izvornim mogućnostima ciljne platforme.

Ranije smo napisali post u kojem su predstavljene najbolje biblioteke i okviri korisničkih sučelja. U ovom ćemo postu detaljno pogledati knjižnice komponenata React Native.

Najbolje knjižnice komponenti React Native godine

1. NativeBase

Najbolje biblioteke React Native komponenti # 1: NativeBase

Ako naiđete na prepisivanje komponenti React za različite platforme, trebali biste je upotrijebiti s NativeBase, dinamičnim front-end okvirom. Biblioteka je zbirka bitnih komponenti React Native na više platformi i dobro je mjesto za početak izrade vaše aplikacije. Komponente su izgrađene s React Native u kombinaciji s nekom JavaScript funkcionalnošću s prilagodljivim svojstvima. Možete koristiti i bilo kakve izvorne biblioteke drugih proizvođača izvan okvira.

NativeBase je potpuno open-source i ima 12.000+ zvjezdica Github. Međutim, teme se ipak cijene jer se dodaje više mogućnosti i ekrana. NativeBase je sada dostupan za web korisnici isto. Koristeći istu JavaScript kodnu bazu i radeći s dizajnom specifičnim za platformu za Android i iOS, možete postići prirodan izgled svoje aplikacije. Njihovi projekti otvorenog koda uključuju Native starter aplikaciju, Twitter Clone aplikaciju, ToDo aplikaciju i tutorial. U njihovoj premium košarici pronaći ćete početne aplikacije za rezervacije, iznajmljivanje, popis poslova, razmjenu poruka i još mnogo toga.

2. Materijal Kit React Native

Najbolje knjižnice komponenata React Native # 2: izvorni materijal-kit-react

Material Kit React Native nudi besplatni matični predložak aplikacija s dizajnom materijala. Izgrađen sa Galio okvir, redizajnira najčešće komponente kako bi stvari bile minimalne i u skladu s Googleovim dizajnom materijala. Jednostavan je za upotrebu i uključuje 200+ ručno izrađenih elemenata poput gumba, kartica, navigacije i ulaza. Sve komponente mogu poprimiti varijacije u boji mijenjanjem teme. Uz to, postoji pet prilagođenih dodataka i pet primjeranih stranica.

S blizu 200 zvijezda Github, nudi a Pro verzija Također vam omogućava pristup primjerim stranicama i dokumentaciji.

3. Reagirajte nativne elemente

Najbolje biblioteke komponenata React Native # 3: reagiraju nativni elementi

React Native Elements je multiplatformni skup alata React Native koji koristi na jednom mjestu brojne sjajne otvorene korisničke sučelje koje su napravili programeri. Možete uroniti u pakete sastavljene od strane React Native Elements i biti sigurni da API ima dosljedan izgled. Nije iznenađujuće da je na njemu primljeno 17.000 zvijezda Github.

Paket uključuje čitavu košaru komponenti poput cijena, značka, prekrivanje, razdjelnik i trake za pretraživanje koje su specifične za platformu. Jednostavni su za upotrebu i vrlo prilagodljivi. Podupirači za sve komponente definirani su na jednom središnjem mjestu što omogućuje jednostavno ažuriranje ili izmjenu komponenti. Uz to, može poslužiti kao platforma koja povezuje male timove koji razvijaju komercijalne aplikacije React Native s doprinosom otvorenog koda.

Da biste koristili React Native za svoje web-bazirane projekte, postoje Reagirajte nativni web. Omogućuje stvaranje brzih, prilagodljivih korisničkih sučelja u JavaScriptu i integrira se s alatima React Dev. Moći ćete dijeliti svoju šifru između aplikacija React Native i web aplikacija. Podržava vrstu, klik ili pomicanje kao načine unosa, ima ugrađenu pristupačnost i podršku za RTL, a koriste ga slični Twitter, Uber i Flipkart.

4. Lottie za React Native

Lottie

Lottie je knjižnica iz Airbnb-a za mobitele kako bi vam pomogla u dodavanju animacija u vaše aplikacije. Nakon stvaranja animacija u Adobe After Effects, morat ćete ih pretvoriti u format koji je upotrebljiv u vašoj web aplikaciji. Lottie vam pomaže u tome.

Djeluje izvozom podataka o animaciji u JSON formatu iz proširenja za After Effects, BodyMovin. Ovo je proširenje u paketu s JS uređajem za prikazivanje animacija na webu. Radi i sa React Native, a službenim dokumentima možete pristupiti na Github gdje je prikupio blizu 12.000 zvijezda.

Lottie knjižnice i dodaci jesu dostupno besplatno, a možete koristiti zbirku datoteka sa animacijom kako biste učinili svoje aplikacije atraktivnim i zanimljivim. Datoteke za animaciju male su i u vektorskom formatu. Kao takav, ne biste trebali imati nikakav utjecaj na performanse vaše aplikacije. U isto vrijeme, može začiniti vaš sučelje i učiniti vizualno privlačnijim.

5. Reagirajte nativne ikone izvornih izvora

reagiraju-nativni-vektor ikone

Ova je jedna od najboljih biblioteka komponenti React Native ako tražite neke ikone u svojim aplikacijama. S bibliotekom od 3.000+ ikona prilično ste sigurni da ćete pronaći nešto što će odgovarati vašim potrebama. Osim toga, ikone je moguće prilagoditi, oblikovati i proširiti dok ih integrirate u svoj projekt.

Paket podržava TabBar i Toolbar Android, kao i izvor slike i višeslojni font. S blizu 12 000 zvijezda Github, može biti savršeno pogodan za gumbe, logotipe i gumice. Povlači se Animirana biblioteka React Native kombinirajući ga s bilo kojom ikonom kako biste stvorili animiranu komponentu. Ako već imate font ikone s pridruženom CSS datotekom, jednostavno možete generirati skup ikona sa skriptu generiranja ikona.

6. Ignite CLI

zapaliti

Ignite CLI je čvrst startarski set za React Native aplikacije. Bez ikakvog troška, ​​zadana ploča za bojler React Native bez napora vam pomaže u izgradnji izvornih aplikacija. Jednostavno se instalira i pridržava najboljih praksi u izradi, omogućujući vam da prilagodite ploče s bojlerima vašem projektu. Izvan okvira, radi i s Androidom i iOS-om. Postoji podrška i za samostalne dodatke.

Uz to, možete birati između više kotlovskih ploča ili pokrenuti vlastiti. Modularni sustav dodataka omogućuje vam dodavanje značajki aplikacije ili pisanje vlastitog. Zaslon s primjerom upotrebe pomaže vam da testirate biblioteke drugih proizvođača i napravite aplikacije koje se sastoje od više komponenti. Zaslon također sadrži primjere najčešće korištenih aplikacija izgrađenih s osnovnim komponentama. Da bismo vam lakše odredili komponente i lako ih promijenili, ovaj zaslon također registrira primjere u datotekama komponente. S ovog zaslona možete testirati, koristiti i dijeliti komponente sa svojim timom. Ignite CLI je zaradio 10,000+ zvjezdica Github.

7. React Native Mapview

reagirati-domaće-karte

Jedna od biblioteka komponenti React Native koja nudi komponente karte za Android i iOS je React Native Mapview. Njegova je konstrukcija takva da su redovna obilježja na bilo kojoj karti poput markira i poligona navedena kao djeca komponente Mapview. To pomaže API-ju da deklarativno kontrolira značajke na karti intuitivno. Sa svoje strane morat ćete osigurati omogućavanje API-ja Google Maps u Google konzoli.

Puno možete učiniti za prilagodbu stila karte. Moći ćete promijeniti položaj prikaza karte, praćenje regije / lokacije i odrediti zanimljive točke na Google kartama. Možete omogućiti zumiranje na određene markere ili koordinate ili ih čak animirati. Ako dodavanju vrijednosti animirane regije dodijelite podlogu, Mapview može upotrebljavati Animirani API za kontrolu centra i zumiranje karte. Ako ne odredite prilagođene markere, zadane će se markere prikazati.

Sjajno je što su markere povuci, mogu se prilagoditi slikama i tijekom povlačenja ažurirati druga korisnička sučelja. Ako vam treba više, postoji oznaka za markere, tvorce poligona te slojeve i krugove i poligone. Korisnici iOS-a mogu stvoriti gradijentne linije. Nije iznenađujuće da na njemu ima 10.000+ zvjezdica Github.

8. Reagirajte nativni daroviti chat

reagirati-native-darovitih chat

Kao što ime sugerira, React Native nadareni chat pomoći će vam u postavljanju Chat sučelja za React Native (i web). Pisano TypeScriptom, uključuje potpuno prilagodljive komponente koje pomažu u učitavanju ranijih poruka ili kopiranju poruka u međuspremnik i još mnogo toga. Tu je i InputToolbar koji pomaže korisnicima da preskoče tipkovnicu.

Kako bi se poboljšalo korisničko iskustvo, omogućava Avataru kao početne podatke korisnika, lokalizirane datume, višeslojni TextInput, brze odgovore (bot) i sistemsku poruku. Podrška je i za Reduxa. Daroviti chat ima 8.000+ zvjezdica Github.

9. Reagirajte urođeno korisničko sučelje mače

reagiraju-nativni-ui-mačku

Jedna od biblioteka komponenata React Native koja se može koristiti kao početni komplet za mobilne aplikacije za bilo koju domenu, uključujući e-trgovinu, je React Native UI Kitten – implementacija React Native Eva Design sustav. S ocjenom 5000 više Github, nudi set od oko 20 komponenti opće namjene oblikovane na isti način da se pobrinu za vizualni izgled.

S ovom zauvijek besplatnom bibliotekom otvorenog koda, možete koristiti pružene teme ili stvoriti što više vlastitih tema, a sve to bez promjene izvornog koda komponenata. Nadalje, možete mijenjati između tamnih i svijetlih tema tijekom izvođenja bez potrebe za ponovnim učitavanjem stranice. Jednom kada instalirate UI Kitten paket iz NPM-a, možete uvesti komponente i započeti ih koristiti u svom projektu.

10. Reagirati izvorni papir

reactnativepaper

Druga besplatna biblioteka otvorenog koda je React Native Paper. Ima sve glavne komponente, a dizajnirane su u skladu s Googleovim standardima dizajna materijala.

Papir je platformski i djeluje i na webu i na mobilnim uređajima. Postoje komponente i interakcije koje odgovaraju skoro svakom scenariju upotrebe. Pri tome se brine većina detalja, uključujući animacije, pristupačnost i logiku sučelja. Možete prilagoditi zadane boje ili napraviti svoj vlastiti. Osim toga, imate potpunu tematsku podršku, kao i mogućnost prelaska između mračnog i svijetlog načina rada. Na Github, na njemu se nalaze 4000 više zvijezda.

11. React Kit za domorodne materijale

reagiraju-nativnoj materijala kompleta

Sljedeći na našem popisu knjižnica komponenata React Native je još jedan skup UI komponenti koji donosi dizajn materijala React Native. Unutar ćete pronaći gumbe, kartice, klizače raspona i tekstna polja. Vidjet ćete i vrtove i trake za napredak za prikaz punjenja, kao i preklopnike za prekidače, radio gumbe i potvrdne okvire.

Potrebno je samo nekoliko redaka koda za dodavanje gumba pomoću unaprijed definiranih graditelja koji se pridržavaju zadane teme Material design lite. Pomoću alata za izgradnju možete izraditi i prilagođene tipke od početka. Isti je slučaj i s ugrađenim tekstnim poljima. I ne samo to, stilove možete prilagoditi promjenom globalne teme. To će utjecati na sve potvrdne okvire i radio gumbe kroz cijelu aplikaciju. Na Github, ova knjižnica ima 4.700 zvijezda.

12. Korisničko sučelje reakcije izvornog materijala

reagiraju-nativnoj materijala-ui

Korisničko sučelje React Native Material nudi blizu 20 komponenti za React Native. Komponente uključuju akcijske gumbe, avatare, podnaslove, ladice, razdjelnike, alatne trake i još mnogo toga. Te su komponente vrlo prilagodljive te koriste konstrukciju materijala u svojoj konstrukciji. Svaka prilagodba koju napravite prema temi može se proširiti i na ostale komponente, uključujući i sve koje sami izradite. Lokalne promjene mogu se izvršiti presvlačenjem stilova gdje god je potrebno.

U slučaju da već koristite React Native Vector Icon, instalacijom nema mnogo posla. Inače, trebat ćete je preuzeti ikone materijala za Android i pobrinite se da imate Roboto za iOS. Ova je knjižnica zaradila 3,000+ zvjezdica Github.

13. RNUILIB

rnuilib

S više od 60 komponenti u ovom kompletu, RNUILIB ima gotovo 2000 zvijezda Github. Uz uključene primjere uživo za sve komponente, možete provjeriti dostupne opcije prije nego što ih upotrebljavate u svom projektu.

Neke od komponenti su: animirana slika, skener koji pokazuje napredak, avatari za prikaz slika profila, osnovni gumbi i komponente klizača gradijenta.

14. Nachos korisničko sučelje

Nachos korisničko sučelje

S 30+ gotovih komponenti koje možete koristiti s bilo kojim JavaScript ili React Native projektom, Nachos UI ima 1900+ zvjezdica Github. Ono što stvarno pomaže je da se ne treba previše brinuti oko stiliziranja bilo koje komponente. Sve što trebate učiniti je uvoziti bilo koji unaprijed dizajnirani ulaz iz jedne komponente u drugu. Nakon što instalirate Nachos UI komplet, odaberite bilo koju komponentu, uvezite odgovarajući React Native kôd, a zatim nastavite da je prilagodite vašem projektu.

Ovaj besplatni softver sa otvorenim kodom i u zajednici koristi Avocode, potpuno opremljen alat za razmjenu i inspekciju Photoshop i Sketch dizajna. Zahvaljujući React Native za web, možete ga koristiti i za web bazirane projekte.

15. ShoutEm

ShoutEm

Shoutem je platforma za izgradnju aplikacija koja radi pomoću proširenja ili modularnih blokova građevine, pomalo poput izrade web stranice s dodacima na WordPressu. Sa 40+ cjelovitih proširenja, okupio je 450+ zvjezdica Github. Proširenja uključuju galerije za fotografije i videozapise, proizvode, događaje, jelovnike restorana i još mnogo toga. Možete slobodno koristiti proširenja otvorenog koda u svojoj aplikaciji. Jednostavnim forsiranjem možete ih modificirati na bilo koji način.

Shoutem nudi brojne mobilne back-end usluge poput analitike, provjere autentičnosti korisnika, izgleda, push notifikacija i još mnogo toga. Nadalje, postoje mnoge dobro kodirane teme koje možete koristiti i prilagoditi. Shoutem koristi 100% JavaScript i React Native.

To je naš popis najboljih biblioteka komponenti React Native. Koji je vaš izbor? Podijelite u komentarima.

Možda će vas zanimati i ovi članci:

  • Besplatno reagirajte native predloške za razvoj aplikacija

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector