15 reagoida alkuperäisten komponenttikirjastot, jotka sinun pitäisi tietää vuonna 2020

Reagoi alkuperäisten komponenttikirjastot, jotka sinun pitäisi tietää


React natiivikomponenttikirjastot voivat säästää paljon aikaa, kun työskentelet seuraavan sovellusprojektisi parissa. Kuinka niin? Aloitetaan itse Reaktista. Luultavasti tiedät, että React on avoimen lähdekoodin JavaScript-kirjasto, joka auttaa rakentamaan käyttöliittymiä sekä verkko- että mobiilisovelluksille. Se sisältää useita komponentteja, joita voit käyttää helposti sovelluksissasi.

Yleensä, kun rakennat komponentteja Reaktissa, joudut muotoilemaan ne sopimaan kohdeympäristön ohjeisiin. Siellä missä Reagoi omaperäinen voi auttaa. Se on kehys, jonka avulla voit kehittää mobiilisovelluksia käyttämällä Reaktoria yhdessä kohdealustan natiivien ominaisuuksien kanssa.

Aiemmin kirjoitimme viestin, joka sisältää parhaat käyttöliittymäkomponenttikirjastot ja -kehykset. Tässä viestissä tarkastelemme tarkemmin React Native -komponenttikirjastoja.

Vuoden parhaat reagoimaan alkuperäiskomponenttikirjastot

1. NativeBase

Paras React natiivikomponenttikirjastot # 1: NativeBase

Jos joudut kirjoittamaan React-komponentteja eri alustoille, sinun pitäisi antaa se mennä NativeBase-sovelluksen, dynaamisen käyttöliittymän, avulla. Kirjasto on kokoelma tärkeitä alustojenvälisiä React Native -komponentteja, ja se on hyvä paikka aloittaa sovelluksesi rakentamisen. Komponentit on rakennettu React Native -sovelluksella yhdistettynä JavaScript-toimintoihin, joilla on muokattavat ominaisuudet. Voit myös käyttää mitä tahansa kolmannen osapuolen alkuperäisiä kirjastoja.

NativeBase on täysin avoimen lähdekoodin ja siinä on yli 12 000 tähteä GitHub. Teemat ovat kuitenkin korkeatasoisia, koska uusia ominaisuuksia ja näytöitä lisätään. NativeBase on nyt saatavana verkkokäyttäjät liian. Käyttämällä samaa JavaScriptin kooditietokantaa ja työskentelemällä käyttöjärjestelmäkohtaisen suunnittelun kanssa Androidille ja iOS: lle voit saada sovelluksellesi alkuperäisen ilmeen. Heidän avoimen lähdekoodin hankkeisiin kuuluvat alkuperäiskäynnistyssovellus, Twitter-kloonisovellus, ToDo-sovellus ja opetusohjelma. Heidän premium-koristaan ​​löydät aloitussovellukset varauksia, vuokrat, työpaikat, viestit ja paljon muuta.

2. Materiaalisarja reagoi natiivi

Paras React natiivikomponenttikirjasto # 2: materiaali-pakki-reagoi-natiivi

Material Kit React Native tarjoaa ilmaisen natiivisovellusmallin materiaalisuunnittelulla. Rakennettu Galio-puitteet, se suunnittelee yleisimmät komponentit, jotta asiat pysyisivät mahdollisimman pieninä ja sopivat yhteen Googlen materiaalisuunnittelun kanssa. Sitä on helppo käyttää, ja se sisältää yli 200 käsintehtyä elementtiä, kuten painikkeet, kortit, navigoinnin ja tulot. Kaikki komponentit voivat ottaa värivaihtoehtoja tekemällä muutoksia teemaan. Lisäksi on olemassa viisi mukautettua laajennusta ja viisi esimerkkisivua.

Lähes 200 tähteä päällä GitHub, se tarjoaa Pro-versio myös antaa sinulle pääsyn useammalle esimerkkisivulle ja dokumentaatiolle.

3. Reagoi alkuperäisosat

Paras React natiivikomponenttikirjasto # 3: reagoi-natiivielementit

React Native Elements on monialustainen React Native UI -työkalupaketti, joka kokoaa yhteen paikkaan useita kehittäjien tekemiä upeita avoimen lähdekoodin käyttöliittymäkomponentteja. Voit sukeltaa React Native Elementsin kokoamiin paketteihin ja olla varma, että sovellusliittymän ulkoasu ja tuntuma ovat johdonmukaisia. Ei ole yllättävää, että se on saanut 17 000 tähteä GitHub.

Paketti sisältää koko korin komponentteja, kuten hinnoittelu, merkki, peittokuva, jakaja ja alustakohtaiset hakupalkit. Niitä on helppo käyttää ja todella muokattavissa. Kaikkien komponenttien rekvisiitta on määritelty yhdessä keskeisessä paikassa, mikä mahdollistaa komponenttien päivittämisen tai muokkaamisen helposti. Lisäksi se voi toimia alustana, joka yhdistää pienet tiimit, jotka kehittävät kaupallisia React Native -sovelluksia avoimen lähdekoodin avulla.

React Native -sovelluksen käyttämiseen verkkopohjaisissa projekteissasi on Reagoi alkuperäisverkko. Se mahdollistaa nopeiden, mukautuvien käyttöliittymien luomisen JavaScriptiin ja integroituu React Dev -työkaluihin. Voit jakaa koodipohjasi React Native -sovellusten ja verkkosovellusten välillä. Se tukee tyyppiä, napsauta tai pyyhkäistä syöttömuotoina, siinä on sisäänrakennettu pääsy ja RTL-tuki, ja sitä käyttävät Twitter, Uber ja Flipkart.

4. Lottie React Nativelle

Lottie

Lottie on Airbnb: n kirjasto matkapuhelimille, jonka avulla voit lisätä animaatioita sovelluksiin. Yleensä, kun olet luonut animaatioita Adobe After Effects -sovelluksessa, sinun on muunnettava ne Web-sovelluksessa käytettävään muotoon. Lottie auttaa sinua tässä.

Se toimii viemällä animaatiotietoja JSON-muodossa After Effects -laajennuksesta, BodyMovin. Tämä laajennus on mukana JS-soittimessa animaatioiden tuottamiseksi verkossa. Se toimii myös React Native -sovelluksen kanssa, ja voit käyttää virallisia asiakirjoja GitHub missä se on kerännyt lähes 12 000 tähteä.

Lottie-kirjastot ja -laajennukset ovat saatavana ilmaiseksi, ja voit tehdä animaatiotiedostojen kuratoidun kokoelman avulla sovelluksesi houkutteleviksi ja mielenkiintoisiksi. Animaatiotiedostot ovat kooltaan pieniä ja vektorimuodossa. Sinänsä Sinun ei pitäisi olla vaikutusta sovelluksesi suorituskykyyn. Samalla se voi lisätä käyttöliittymääsi ja tehdä siitä visuaalisesti houkuttelevamman.

5. Reagoi alkuperäisvektorikuvakkeita

reagoida-natiivi-vektori-kuvakkeet

Tämä on yksi React Native -komponenttikirjastosta, jos etsit joitain sovelluksissa käytettäviä kuvakkeita. Jos kirjastossa on yli 3000 kuvaketta, olet melko varma, että löydät jotain, joka sopii tarpeisiisi. Lisäksi kuvakkeita on mahdollista mukauttaa, muotoilla ja laajentaa integroimalla ne projektiisi.

Paketti tukee TabBar ja Android-työkalupalkki sekä kuvan lähde ja monityylinen kirjasin. Lähes 12 000 tähteä päällä GitHub, se voi sopia täydellisesti painikkeisiin, logoihin ja navigointipalkkeihin. Se vetoaa React Nativen animoitu kirjasto yhdistämällä sen mihin tahansa kuvakkeeseen animoidun komponentin luomiseksi. Jos sinulla on jo kuvake fontti liitettyyn CSS-tiedostoon, voit luoda helposti kuvakesarjan generaattori-kuvaohjelmalla.

6. Sytytä CLI

sytyttää

Ignite CLI on vankka aloituspakkaus React Native -sovelluksille. Oletusarvoinen React Native -levykerros auttaa sinua vaivattomasti luomaan omia sovelluksiasi. Se asentuu helposti ja noudattaa parhaita käytäntöjä rakentamisessaan, samalla kun voit mukauttaa kattilalevyt projektiisi. Sen ulkopuolella, se toimii sekä Androidin että iOS: n kanssa. Siellä on tuki myös itsenäisille laajennuksille.

Lisäksi voit valita joukosta kattiloita tai perustaa oman. Modulaarisen liitännäisjärjestelmän avulla voit lisätä sovellusominaisuuksia tai kirjoittaa omia. Käyttöesimerkkinäyttö auttaa sinua testaamaan kolmansien osapuolien kirjastoja ja rakentamaan sovelluksia, jotka koostuvat useista komponenteista. Näyttö sisältää myös esimerkkejä yleisesti käytetyistä sovelluksista, jotka on rakennettu peruskomponenteilla. Komponenttien tunnistamiseen ja niihin muutosten tekemiseen auttaa tämä näyttö rekisteröimään myös komponenttitiedostojen esimerkit. Tällä näytöllä voit testata, käyttää ja jakaa komponentteja joukkueesi kanssa. Ignite CLI on ansainnut 10 000+ tähteä GitHub.

7. Reagoi alkuperäisen karttanäkymän

reagoida-äidinkielenään kartat

Yksi React Native -komponenttikirjastoista, joka tarjoaa karttakomponentteja Androidille ja iOS: lle, on React Native Mapview. Sen rakenne on sellainen, että minkä tahansa kartan säännölliset piirteet, kuten merkit ja monikulmio, määritetään Mapview-komponentin lapsiksi. Tämä auttaa API: ta hallitsemaan kartan piirteitä intuitiivisesti. Oman puolestasi sinun on varmistettava, että Google Maps -sovellusliittymä otetaan käyttöön Google-konsolissa.

Karttatyyliä voi mukauttaa paljon. Voit muuttaa karttanäkymän sijaintia, seuranta-aluetta / sijaintia ja tehdä kiinnostavista kohteista napsautettavissa Google Mapsissa. Voit ottaa zoomauksen määritettyihin merkkeihin tai koordinaatteihin tai jopa animoida niitä. Jos määrität animoidun alueen arvon potentiaalille, Mapview voi käyttää Animoitua sovellusliittymää hallitaksesi kartan keskustaa ja zoomausta. Ellet määritä mukautettuja merkintöjä, oletusmerkinnät tehdään.

Hienoa on, että merkit ovat vetäviä, niitä voidaan mukauttaa kuvien avulla ja ne päivittävät muita käyttöliittymiä vedon aikana. Jos tarvitset lisää, on mukautettu huomautus merkinnöille, monikulmion luojaille sekä ympyrän ja monikulmion päällekkäisyyksille. iOS-käyttäjät voivat luoda kaltevuuspoliiseja. Ei ole yllättävää, että siinä on yli 10 000 tähteä GitHub.

8. Reagoi lahjakas keskustelu

reagoida-natiivi lahjakas-chat

Kuten nimestä voi päätellä, React Native Gifted Chat auttaa sinua perustamaan Chat UI React Native (ja Web) -sovellukselle. TypeScriptillä kirjoitettu, se sisältää täysin muokattavia komponentteja, jotka auttavat lataamaan aiempia viestejä tai kopioimaan viestejä leikepöydälle ja muihin. Siellä on myös InputToolbar, joka auttaa käyttäjiä ohittamaan näppäimistön.

Käyttäjäkokemuksen parantamiseksi se sallii Avatarin käyttäjän alkukirjaimina, lokalisoidut päivämäärät, monirivinen TextInput, pikavastausviestit (botti) ja järjestelmäviesti. Siellä on tukea myös Reduxille. Gifted Chat -palvelussa on 8 000+ tähteä GitHub.

9. Reagoi alkuperäisen käyttöliittymän kissanpentu

reagoida-natiivi-ui-kissa

Yksi React Native -komponenttikirjastoista, joita voidaan käyttää minkä tahansa verkkotunnuksen, myös verkkokaupan, mobiilisovellusten käynnistyspaketiksi, on React Native UI Kitten – React Native -sovelluksen Eva Design -järjestelmä. Luokitus 5000 tai enemmän tähtiä GitHub, se tarjoaa sarjan noin 20 yleiskäyttöistä komponenttia, jotka on muotoiltu samalla tavalla huolehtimaan visuaalisesta ulkonäöstä.

Tämän ikuisesti ilmaisen ja avoimen lähdekoodin kirjaston avulla voit käyttää toimitettuja teemoja tai luoda niin monta omaa teemaa, kaikki muuttamatta komponenttien lähdekoodia. Lisäksi voit vaihtaa tummien ja vaaleiden teemien välillä ajon aikana tarvitsematta ladata sivua uudelleen. Kun olet asentanut UI Kitten -paketin NPM: stä, voit tuoda komponentit ja alkaa käyttää niitä projektissa.

10. Reakeri alkuperäispaperi

reactnativepaper

Toinen ilmainen ja avoimen lähdekoodin kirjasto on React Native Paper. Siinä on kaikki tärkeimmät komponentit, ja nämä komponentit on suunniteltu noudattamaan Googlen materiaalisuunnittelustandardeja.

Paperi on alustojen välistä ja toimii sekä verkossa että mobiililaitteissa. Siellä on komponentteja ja vuorovaikutuksia, jotka sopivat melkein kaikkiin käyttötapauksiin. Useimmat yksityiskohdat, mukaan lukien animaatiot, saavutettavuus ja käyttöliittymälogiikka, on otettu huomioon. Voit mukauttaa oletusvärejä tai tehdä omia. Lisäksi sinulla on täysi heille tuki ja mahdollisuus vaihtaa tumman ja vaalean tilan välillä. Päällä GitHub, se kerää yli 4000 tähteä.

11. React alkuperäismateriaalisarja

reagoida-natiivi-aine-kit

Seuraava React Native -komponenttikirjastomme luettelossa on vielä yksi käyttöliittymäkomponenttien sarja, joka tuo materiaalisuunnittelun React Native -sovellukseen. Sisältä löydät painikkeet, kortit, alueliukusäätimet ja tekstikentät. Näet myös kääntöruuveja ja etenemispalkkeja lataamisen näyttämiseksi, samoin kuin kytkimien, valintanappien ja valintaruutujen kytkimet.

Ainoa muutama rivi koodia painikkeiden lisäämiseksi käyttämällä ennalta määritettyjä rakennusaineita, jotka noudattavat Materiaalisuunnittelu-Lite-oletusteemaa. Rakennustyökalun avulla voit myös luoda räätälöityjä painikkeita tyhjästä. Sama pätee sisäänrakennettuihin tekstikenttiin. Paitsi, että voit mukauttaa tyylejä vaihtamalla globaalin teeman. Tämä vaikuttaa kaikkiin valintaruutuihin ja valintanappiin koko sovelluksessa. Päällä GitHub, tämä kirjasto kerää 4700 tähteä.

12. Reagoi alkuperäisen materiaalin käyttöliittymä

reagoida-natiivi-aine-ui

React Native Material -liittymä tarjoaa lähes 20 komponenttia React Native -sovellukselle. Komponentit sisältävät toimintapainikkeet, avataarit, alaotsikot, laatikot, jakajat, työkalurivit ja paljon muuta. Nämä komponentit ovat hyvin muokattavissa ja käyttävät rakenteessaan materiaalisuunnittelua. Mikä tahansa teeman mukauttaminen voidaan laajentaa myös muihin komponentteihin, mukaan lukien kaikki, jotka itse rakennat. Paikalliset muutokset voidaan tehdä ohittamalla tyylejä tarvittaessa.

Jos käytät jo React Native Vector -kuvakkeita, asennuksessa ei ole paljon tehtävää. Muuta, sinun on ladattava materiaalikuvakkeet Androidille ja varmista, että sinulla on Roboto iOS: lle. Tämä kirjasto on ansainnut 3 000 tai enemmän tähtiä GitHub.

13. RNUILIB

rnuilib

RNUILIB-kellot sisältävät tässä sarjassa yli 60 komponenttia, joten kellot ovat lähes 2000 tähteä GitHub. Kaikille komponenteille on sisällytetty live-esimerkkejä. Voit tarkistaa käytettävissä olevat vaihtoehdot ennen kuin käytät sitä projektissa.

Jotkut komponentit ovat: animoitu kuva, skanneri edistymisen osoittamiseksi, avataarit profiilikuvien näyttämiseksi, peruspainikkeet ja liukukansien liukukomponentit.

14. Nachos UI

Nachos UI

Yli 30 valmiilla komponenteilla, joita voit käyttää missä tahansa JavaScript- tai React Native -projektissa, Nachos UI: lla on 1 900+ tähteä GitHub. Mikä todella auttaa, on, että sinun ei tarvitse huolehtia liikaa minkään komponentin muotoilusta. Ainoa mitä sinun täytyy tehdä, on tuoda jokin esimuotoiltu tulo komponenteista toiseen. Kun olet asentanut Nachos UI -paketin, valitse haluamasi komponentti, tuo vastaava React Native -koodi ja jatka sitten mukauttamalla sitä projektiisi sopivaksi.

Tämä ilmainen, avoimen lähdekoodin ja yhteisöpohjainen ohjelmisto käyttää Avocodea, täysin varustettua työkalua Photoshop- ja Sketch-mallien jakamiseen ja tarkistamiseen. Kiitokset React Native verkossa, voit käyttää sitä myös verkkopohjaisiin projekteihin.

15. Shoutem

shoutem

Shoutem on sovellusten rakennusalusta, joka toimii laajennuksia tai modulaarisia rakennuspalikoita käyttämällä, aivan kuten rakentamalla verkkosivustoa, jolla on plugins WordPressissä. 40+ täydennetyllä laajennuksella se on kerännyt yli 450 tähteä GitHub. Laajennukset sisältävät valokuvien ja videoiden galleriat, tuotteet, tapahtumat, ravintolavalikot ja paljon muuta. Voit käyttää näitä avoimen lähdekoodin laajennuksia vapaasti sovelluksessasi. Ja yksinkertaisesti haarukoimalla niitä, voit muokata niitä haluamallasi tavalla.

Shoutem tarjoaa monia mobiilipalveluita, kuten analytiikkaa, käyttäjän todennusta, asetteluja, push-ilmoituksia ja paljon muuta. Lisäksi on monia hyvin koodattuja teemoja, joita voit käyttää ja muokata. Shoutem käyttää 100% JavaScriptiä ja React Native -sovellusta.

No, tässä on luettelo hienoimmista React Native -komponenttikirjastoista. Kumpi on valintasi? Jaa kommentteihin.

Saatat olla kiinnostunut myös näistä artikkeleista:

  • Ilmaiset reagoivat alkuperäiset mallit sovellusten kehittämiseen

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 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