15 reaalajas lähtekomponentide teekut, mida peaksite teadma 2020. aastal

15 reaalajas lähtekomponentide teekut, mida peaksite teadma 2020. aastal

15 reaalajas lähtekomponentide teekut, mida peaksite teadma 2020. aastal
СОДЕРЖАНИЕ
02 июня 2020

Reaktiivsed lähtekomponentide teegid, mida peaksite teadma


Järgmise rakenduse projekti kallal töötades saavad reaalajas algkomponentide teegid olla tohutu aja kokkuhoid. Kuidas? Noh, alustame Reaktist endast. Tõenäoliselt teate, et React on avatud lähtekoodiga JavaScripti teek, mis aitab luua kasutajaliideseid nii veebipõhiste kui ka mobiilirakenduste jaoks. See sisaldab mitmeid komponente, mida saate hõlpsalt oma rakenduste jaoks kasutada.

Tavaliselt peate komponenti Reaktoris ehitades neid stiilima, et need vastaksid teie sihitud platvormi juhistele. Kus see on Reageeri pärismaalane saab aidata. See on raamistik, mida saate kasutada mobiilirakenduste arendamiseks, kasutades Reaktorit koos sihtplatvormi loomulike võimalustega.

Varem kirjutasime postituse, kus on toodud parimad kasutajaliidese komponentide teegid ja raamistikud. Selles postituses käsitleme lähemalt React Native komponendi raamatukogusid.

Aasta parimad React natiivkomponentide teegid

1. NativeBase

Parimad reaalajas natiivkomponentide teegid nr 1: NativeBase

Kui leiate, et kirjutate Reaxi komponente ümber erinevatele platvormidele, peaksite selle kasutama NativeBase’i abil – dünaamilise kasutajaliidese raamistikuga. Teek on oluliste platvormidevaheliste React Native komponentide kollektsioon ja see on hea koht oma rakenduse loomise alustamiseks. Komponendid on ehitatud koos React Native-ga koos mõnede kohandatavate omadustega JavaScripti funktsioonidega. Võite kasutada ka mis tahes kolmanda osapoole kohalikke raamatukogusid.

NativeBase on täielikult avatud lähtekoodiga ja sellel on 12 000+ tähte Github. Teemad on siiski esmaklassilised, kuna lisatakse rohkem funktsioone ja ekraane. NativeBase on nüüd saadaval veebikasutajad ka. Kasutades sama JavaScripti koodialust ja töötades Androidi ja iOS-i jaoks platvormispetsiifilise kujundusega, saate oma rakendusele loomuliku ilme ja tunde. Nende avatud lähtekoodiga projektide hulka kuuluvad natiivne käivitusrakendus, Twitteri kloonimisrakendus, rakendus ToDo ja juhendajarakendus. Nende lisatasude korvist leiate stardirakendused broneerimiseks, rentimiseks, tööpakkumiste kuvamiseks, sõnumite saatmiseks ja muuks.

2. Materjalide komplekt reageerib pärismaalasele

Parimad reaalajas natiivkomponentide teegid nr 2: materjal-komplekt-reageerige looduslikult

Materjalikomplekt React Native pakub tasuta kujundusega omamaise rakenduse malli. Ehitatud koos Galio raamistik, see kujundab ümber kõige tavalisemad komponendid, et hoida asjad minimaalsena ja olla kooskõlas Google’i materjalide kujundusega. Seda on lihtne kasutada ja see sisaldab üle 200 käsitööna valminud elemendi, näiteks nupud, kaardid, navigeerimine ja sisendid. Kõik komponendid võivad värvusvariante vastu võtta, tehes teema muutmist. Lisaks on viis kohandatud pistikprogrammi ja viis näidislehte.

Ligikaudu 200 tähte on sisse lülitatud Github, see pakub a Pro versioon ka see annab teile juurdepääsu rohkematele näidislehtedele ja dokumentatsioonile.

3. Natiivsete elementide reageerimine

Parimad reaalajas natiivkomponentide teegid nr 3: reageerivad looduslikud elemendid

React Native Elements on platvormideülene React Native UI tööriistakomplekt, mis koondab ühte kohta mitmeid arendajate loodud suurepäraseid avatud lähtekoodiga UI komponente. Võite sukelduda React Native Elementsi poolt kokku pandud pakettidesse ja olla kindel, et API-l on ühtlane välimus ja tunne. Pole üllatav, et see on saanud 17 000 tähte Github.

Pakett sisaldab tervet korvi komponente nagu hinnakujundus, märk, ülekate, jagaja ja platvormipõhised otsinguribad. Neid on lihtne kasutada ja neid saab tõesti kohandada. Kõigi komponentide rekvisiidid on määratletud ühes keskses asukohas, mis võimaldab komponente hõlpsalt värskendada või muuta. Lisaks võib see toimida platvormina, mis ühendab väikeseid meeskondi, kes arendavad avatud lähtekoodiga ärirakendusi React Native.

Veebipõhiste projektide jaoks React Native’i kasutamiseks on olemas: Reaktiivne veeb. See võimaldab JavaScriptis luua kiireid, adaptiivseid kasutajaliideseid ja integreeruda React Dev tööriistadega. Saate oma koodialust jagada reaalajas olevate rakenduste ja veebirakenduste vahel. See toetab sisestusrežiimina tüüpi, klõpsake või libistage, sellel on sisseehitatud juurdepääsetavus ja RTL-tugi ning seda kasutavad Twitteri, Uberi ja Flipkarti meeldijad.

4. Lottie jaoks React Native

lottie

Lottie on Airbnbi raamatukogu mobiiltelefonidele, mis aitab teil oma rakendustele animatsioone lisada. Tavaliselt peate pärast Adobe After Effectsis animatsioonide loomist need teisendama oma veebirakenduses kasutatavasse vormingusse. Lottie aitab sind selles.

See toimib JSON-vormingus animatsiooniandmete eksportimisel laiendist After Effects, BodyMovin. See laiend on komplektis JS-mängijaga, et veebis animatsioone renderdada. See töötab ka React Native abil ja teil on juurdepääs ametlikele dokumentidele Github kus see on kogunud ligi 12 000 tähte.

Lottie teegid ja pistikprogrammid on saadaval tasuta, ja saate kasutada kureeritud animatsioonifailide kogu, et muuta oma rakendused atraktiivseks ja huvitavaks. Animatsioonifailid on väikese suurusega ja vektorvormingus. Seetõttu ei tohiks te oma rakenduse toimivusele mingit mõju avaldada. Samal ajal võib see teie kasutajaliidest vürtsitada ja visuaalselt köitvamaks muuta.

5. Reageerige algvektorite ikoone

reageeri-natiiv-vektor-ikoonid

See on üks parimatest React natiivkomponentide teekidest, kui otsite mõnda ikooni, mida oma rakendustes kasutada. Enam kui 3000 ikooni sisaldava raamatukogu abil on üsna kindel, et leiate midagi teie vajadustele vastavat. Veelgi enam, ikoone on projektisse integreerides võimalik kohandada, stiili muuta ja laiendada.

Pakett toetab TabBari ja Androidi tööriistariba, samuti pildiallikat ja mitme stiiliga fonti. Ligikaudu 12 000 tähte on peal Github, see sobib ideaalselt nuppude, logode ja navigeerimisribade jaoks. See tugineb React Native’i animeeritud kogu ühendades selle mis tahes ikooniga animeeritud komponendi loomiseks. Kui teil on juba seotud CSS-failiga ikoonifond, saate hõlpsalt luua ikoonikomplekti genereerimisikooni skripti abil.

6. Süütage CLI

süüdata

Ignite CLI on kindel käivituskomplekt React Native rakendustele. Tasuta, aitab vaikimisi loodud React Native boileri loomine hõlpsasti loomulike rakenduste loomist. See paigaldatakse hõlpsalt ja järgib oma ehituse parimaid tavasid, võimaldades samal ajal katla plaate oma projektiga kohandada. Karbist väljas töötab see nii Androidi kui ka iOS-iga. Toetatud on ka eraldiseisvatele pistikprogrammidele.

Lisaks saate valida paljude katlamajade hulgast või ise oma käivitada. Moodulpluginsüsteem võimaldab teil lisada rakenduse funktsioone või ise kirjutada. Kasutusnäite ekraan aitab teil katsetada kolmanda osapoole raamatukogusid ja luua mitmest komponendist koosnevaid rakendusi. Ekraan sisaldab ka näiteid üldkasutatavatest põhikomponentidega loodud rakendustest. Komponentide tuvastamiseks ja nende hõlpsaks muutmiseks registreerib see ekraan ka komponendi failides olevad näited. Sellel ekraanil saate oma meeskonnaga komponente testida, neid kasutada ja jagada. Ignite CLI on teeninud 10 000+ tähte Github.

7. Reageeri omakaardivaatele

reageeri-natiiv-kaardid

Üks React Native komponendi teekidest, mis pakub Androidi ja iOS-i jaoks kaardikomponente, on React Native Mapview. Selle ülesehitus on selline, et tavalised funktsioonid igal kaardil, näiteks markerid ja polügoonid, määratletakse Mapview komponendi alammenüüna. See aitab API-l deklaratiivselt juhtida kaardi funktsioone intuitiivselt. Omalt poolt peate tagama Google Mapsi API lubamise Google’i konsoolis.

Kaardistiili kohandamiseks on palju ära teha. Saate muuta kaardivaate asukohta, jälgimispiirkonda / asukohta ja muuta huvipunktid Google Mapsis klõpsatavaks. Saate lubada määratletud markerite või koordinaatide suumimise või neid isegi animeerida. Kui määrate tugiteenusele animeeritud piirkonna väärtuse, saab Mapview kasutada kaardi keskpunkti ja suumi juhtimiseks animeeritud API-d. Kui te ei täpsusta kohandatud markereid, pakutakse vaikemarkerid.

Lahe on see, et markerid on lohistatavad, neid saab piltide abil kohandada ja need värskendavad lohistamise ajal teisi kasutajaliideseid. Kui vajate rohkem, on markerite, polügooni loojate ning ringi ja polügooni ülekatete jaoks kohandatud viiktekstid. iOS-i kasutajad saavad luua gradiendi polüliinid. Pole üllatav, et sellel on 10 000+ tähte Github.

8. Reageeri andekate andekate vestlustega

reageerima-päris-andekas-vestlema

Nagu nimigi ütleb, aitab React Native andekas vestlus teid React Native (ja veebi) vestluse kasutajaliidese seadistamisel. TypeScriptiga kirjutatud sisaldab täielikult kohandatavaid komponente, mis aitavad varasemaid sõnumeid laadida või sõnumeid lõikelauale kopeerida ja palju muud. Ka seal on sisendriistariba, mis aitab kasutajatel klaviatuuri vahele jätta.

Kasutajakogemuse parandamiseks võimaldab see avataari kasutaja initsiaalide, lokaliseeritud kuupäevade, mitmerealise tekstisisestuse, kiirvastuse (boti) ja süsteemisõnumi kaudu. Seal on tugi ka Reduxile. Andekatel vestlustel on sisse lülitatud 8000+ tähte Github.

9. Reaktiivne UI kassipoeg

reageeri-natiiv-ui-kassipoeg

Üks React Native komponendi teegidest, mida saab kasutada mis tahes domeeni, sealhulgas e-kaubanduse mobiilirakenduste stardikomplektina, on React Native UI Kitten – React Native rakenduse Eva Design süsteem. Hinnanguga 5000 tärni on peal Github, see pakub umbes 20 üldotstarbelist komponenti, mis on kujundatud samal viisil visuaalse väljanägemise eest.

Selle igavesti tasuta ja avatud lähtekoodiga teegi abil saate kasutada pakutavaid teemasid või luua nii palju omaenda teemasid, ilma komponentide lähtekoodi muutmata. Veelgi enam, käitamisperioodil saate vahetada tumedate ja heledate teemade vahel, ilma et peaksite lehte uuesti laadima. Kui olete installinud UM Kitten paketi NPM-ist, saate komponendid importida ja hakata neid oma projektis kasutama.

10. Reageeri omalehte

reageeriv paber

Veel üks tasuta ja avatud lähtekoodiga raamatukogu on React Native Paper. Sellel on kõik peamised komponendid ja need komponendid on konstrueeritud vastavalt Google’i materjalide disainistandarditele.

Paber on platvormideülene ja töötab nii veebis kui ka mobiilis. Seal on komponendid ja interaktsioonid, mis sobivad peaaegu iga kasutusjuhtumi korral. Enamiku üksikasjade, sealhulgas animatsioonide, juurdepääsetavuse ja kasutajaliidese loogika eest hoolitsetakse. Saate kohandada vaikevärve või teha need ise. Lisaks on teil täielik toetamise võimalus ja võimalus lülituda pimeda ja valguse režiimi vahel. Peal Github, see koondab 4000+ tähte.

11. Reaktiivsete materjalide komplekt

reageeri-natiiv-materjal-komplekt

Järgmine meie React Native komponendi teekide loendis on veel üks kasutajaliidese komponentide komplekt, mis toob materjali kujunduse React Native sisse. Seest leiate nupud, kaardid, vahemiku liugurid ja tekstiväljad. Samuti näete laadimise kuvamiseks ketrajaid ja edenemisriba, samuti lülitite lüliteid, raadionuppe ja märkeruute.

Nuppude lisamiseks on vaja vaid mõnda koodirida, et kasutada nuppude lisamiseks eelnevalt määratletud ehitajaid, mis järgivad vaiketeemat Materjalide kujundus. Ehitaja abil saate nullist luua ka kohandatud nuppe. Sama on ka sisseehitatud tekstiväljadega. Lisaks stiilide kohandamisele saate muuta ka globaalset teemat. See mõjutab kogu rakenduse kõiki ruute ja raadionuppe. Peal Github, see raamatukogu kogub 4700 tähte.

12. Reaktiivne materjali kasutajaliides

reageerima-natiiv-materjal-ui

React Native Material UI pakub React Native jaoks ligi 20 komponenti. Komponentide hulka kuuluvad tegevusnupud, avatarid, alapealkirjad, sahtlid, jagajad, tööriistaribad ja palju muud. Need komponendid on väga kohandatavad ja nende konstruktsioonis kasutatakse materjalidisaini. Igasuguseid teemakohaseid muudatusi saab laiendada ka muudele komponentidele, sealhulgas ka kõigile, mille ehitate ise. Kohalikke muudatusi saab vajaduse korral teha ülimuslike stiilide kaudu.

Kui kasutate juba reaalajas natiivvektorite ikoone, pole installimisel palju teha. Muu hulgas peate alla laadima materjaliikoonid Androidi jaoks ja veenduge, et teil on Roboto iOS-i jaoks. See raamatukogu on teeninud 3000+ tärni Github.

13. RNUILIB

rnuilib

Selles komplektis on enam kui 60 komponenti, ja RNUILIB paneb kella ligi 2000 tähte Github. Kui kõigi komponentide hulka kuuluvad reaalajas näited, saate enne selle kasutamist oma projektis tutvuda saadaolevate võimalustega.

Mõned komponendid on: animeeritud pilt, skänner edenemise tähistamiseks, avatarid profiilipiltide kuvamiseks, põhinupud ja gradiendi liuguri komponendid.

14. Nachose kasutajaliides

Nachose kasutajaliides

30+ valmiskomponentidega, mida saate kasutada mis tahes JavaScripti või React Native projektiga, on Nachose kasutajaliidese arv 1900+ tähte Github. Mis tõesti aitab, on see, et te ei pea ühegi komponendi kujundamise pärast liiga palju muretsema. Teil on vaja vaid importida eelvormindatud sisendid ühest komponendist teise. Pärast Nachose kasutajaliidese komplekti installimist valige mõni komponent, mida soovite, importige vastav rearealatiivne kood ja seejärel kohandage seda vastavalt oma projektile.

See tasuta, avatud lähtekoodiga ja kogukonnapõhine tarkvara kasutab Avocode’i, mis on täielikult funktsionaalne tööriist Photoshopi ja Sketchi kujunduste jagamiseks ja kontrollimiseks. Tänu Reageeri veebis reaalajas, saate seda kasutada ka veebipõhiste projektide jaoks.

15. Shoutem

karjumine

Shoutem on rakenduste loomise platvorm, mis töötab laienduste või modulaarsete ehitusplokkide abil, mõnevõrra nagu WordPressil pistikprogrammidega veebisaidi ehitamine. 40 ja enama täisfunktsionaalse laiendiga on see kogunud 450+ tähte Github. Laienduste hulka kuuluvad fotode ja videote galeriid, tooted, üritused, restoranimenüüd ja palju muud. Neid avatud lähtekoodiga laiendusi saate oma rakenduses vabalt kasutada. Ja neid lihtsalt kahvlites saate neid muuta mis tahes viisil.

Shoutem pakub palju mobiilseid taustateenuseid, näiteks analüütika, kasutajate autentimine, paigutused, tõuketeated ja palju muud. Lisaks on palju hästi kodeeritud teemasid, mida saate kasutada ja kohandada. Shoutem kasutab 100% JavaScripti ja React Native.

Noh, see on meie nimekiri parimatest React Native komponentide teekidest. Milline neist on teie valitud? Jagage kommentaarides.

Teid võivad huvitada ka need artiklid:

  • Rakenduste arendamiseks tasuta reaalajas mallid

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

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