15 Reaktív natív komponens könyvtár, amelyet 2020-ban tudnia kell

Reaktív natív komponens könyvtárak, amelyeket tudnia kell


A React natív komponens könyvtárak hatalmas időmegtakarítást eredményezhetnek, amikor a következő alkalmazásprojektnél dolgoznak. Hogy-hogy? Nos, kezdjük maga a Reaktúrával. Valószínűleg tudja, hogy a React egy nyílt forrású JavaScript könyvtár, amely elősegíti a felhasználói felületek létrehozását mind a webes, mind a mobil alkalmazásokhoz. Számos összetevőt tartalmaz, amelyeket könnyen használhat alkalmazásaihoz.

Általában, miközben a React-ben összetevőket épít, meg kell stílusolnia azokat, hogy azok megfeleljenek a megcélzott platform irányelveinek. Ahol Reagáljon natív tud segíteni. Ez egy olyan keret, amelyet felhasználhat a mobilalkalmazások fejlesztésére a React és a célplatform natív képességeinek felhasználásával.

Korábban írtunk egy beszámolót, amely a legjobb felhasználói felület-komponensek könyvtárait és kereteit tartalmazza. Ebben a bejegyzésben közelebbről megvizsgáljuk a React Natív komponens könyvtárakat.

Az év legjobb React natív komponenseinek könyvtárai

1. NativeBase

A legjobb React natív komponens könyvtárak # 1: NativeBase

Ha úgy találja, hogy a React összetevőit újraírja különböző platformokon, akkor ezt meg kell adnia a NativeBase-nak, egy dinamikus front-end keretrendszernek. A könyvtár lényeges platformon átívelő React Native összetevők gyűjteménye, és jó hely az alkalmazás felépítésének megkezdéséhez. Az összetevők a React Native segítségével készültek, néhány JavaScript funkcióval kombinálva, testreszabható tulajdonságokkal. Bármely harmadik féltől származó natív könyvtárat használhat a dobozból.

A NativeBase teljesen nyílt forráskódú és 12 000+ csillagot tartalmaz Github. A témák azonban prémiumok, mivel további funkciók és képernyők bővülnek. A NativeBase már elérhető a következőhöz: webes felhasználók is. Ugyanazon JavaScript-kódbázissal, valamint az Android és iOS operációs rendszerhez tartozó platformspecifikus kialakítással együttműködve elérheti alkalmazásának natív megjelenését. A nyílt forráskódú projektek közé tartozik a natív indító alkalmazás, a Twitter klón alkalmazás, a ToDo alkalmazás és az oktató alkalmazás. Prémium kosárukban kezdőalkalmazások találhatók a foglaláshoz, bérleti díjakhoz, munkalehetőségekhez, üzenetküldéshez és még sok máshoz.

2. Anyagkészlet reagálni natív

Legjobb reagált natív komponens könyvtárak # 2: anyag-készlet-reagál-natív

Anyagkészlet A React Native ingyenes natív alkalmazás-sablont kínál anyagi tervezéssel. A Galio keret, átalakítja a leggyakoribb elemeket, hogy a dolgok minimálisak maradjanak, és összhangban álljanak a Google anyagtervével. Könnyen kezelhető, és több mint 200 kézműves elemet tartalmaz, mint például gombok, kártyák, navigáció és bemenetek. Az összes alkotóelem színeváltozásokat szerezhet a téma módosításával. Ezenkívül öt testreszabott bővítmény és öt példa található.

Közel 200 csillag van Github, kínál a Pro verzió ez szintén hozzáférést biztosít további példaoldalakhoz és dokumentációhoz.

3. Reagáljon a natív elemekre

A 3. legjobb reagált natív komponens könyvtárak: reagál-natív elemek

A React Native Elements egy platformon átívelő React Native UI eszközkészlet, amely egy helyen összehozza a fejlesztők által készített nagyszerű nyílt forrású felhasználói felületek összetevőit. Bemerülhet a React Native Elements által összeállított csomagokba, és ellenőrizheti, hogy az API-nak egységes megjelenése és működése van-e. Nem meglepő, hogy 17 000 csillagot kapott Github.

A csomag egy teljes kosár alkatrészt tartalmaz, mint például árazás, jelvény, overlay, elválasztó és platformspecifikus keresősávok. Könnyen kezelhetők és igazán testreszabhatók. Az összes alkatrész támaszpontja egy központi helyen van meghatározva, amely lehetővé teszi az összetevők egyszerű frissítését vagy módosítását. Ezenkívül platformként is szolgálhat, amely a React Native alkalmazásokat fejlesztő kiscsoportokat összeköti nyílt forráskódú hozzájárulással.

A React Native web-alapú projektjeinek használatához van Reaktív natív web. Ez lehetővé teszi a gyors, adaptív felhasználói felületek létrehozását a JavaScript-ben, és integrálható a React Dev eszközökkel. A kódbázist megoszthatja a React Natív alkalmazások és a webalkalmazások között. Támogatja a típus, kattintás vagy ellop beviteli módként, beépített hozzáférhetőséget és RTL támogatást kínál, és a Twitter, az Uber és a Flipkart kedvelői használják.

4. Lottie a React Natívum számára

Lottie

A Lottie az Airbnb mobiltelefonok számára készült könyvtára, amely segít animációk hozzáadásában alkalmazásaihoz. Általában az animációk Adobe After Effects alkalmazásban történő létrehozása után konvertálnia kell azokat a webes alkalmazásban használható formátumba. Lottie segít ebben.

Annak érdekében működik, hogy animációs adatokat JSON formátumban exportál a After Effects kiterjesztésből, a BodyMovinból. Ez a kiterjesztés JS lejátszóval van ellátva, hogy animációkat lehessen megjeleníteni az interneten. A React Native rendszerrel is működik, és a hivatalos dokumentumokhoz hozzáférhet Github ahol közel 12.000 csillagot kapott.

Lottie könyvtárak és plug-inek ingyen elérhető, és felhasználhatja az animációs fájlok kurátus gyűjteményét az alkalmazások vonzóvá és érdekesvé tételére. Az animációs fájlok kicsik és vektoros formátumban vannak. Mint ilyen, nem szabad semmilyen hatást gyakorolnia az alkalmazás teljesítményére. Ugyanakkor felfrissítheti felhasználói felületét, és vizuálisan vonzóbbá teheti.

5. Reagáljon a natív vektoros ikonok

reagálnak őshonos-vektor ikonok

Ez az egyik a legjobb React natív komponens könyvtárak közül, ha néhány alkalmazást keres az alkalmazásokban. A 3000+ ikonból álló könyvtárral elég biztos, hogy talál valamit, amely megfelel az Ön igényeinek. Ráadásul testreszabhatja, stílusosíthatja és kibővítheti az ikonokat, miközben integrálja őket a projektbe.

A csomag támogatja a TabBar és az Android Eszköztár eszközöket, valamint a képforrást és a több stílusú betűtípust. Közel 12.000 csillag van Github, tökéletesen illeszkedik a gombokhoz, logókhoz és navigációs sávokhoz. Ez támaszkodik React Native animált könyvtára kombinálva bármilyen ikonnal animált összetevő létrehozásához. Ha már van egy ikon betűtípusa a társított CSS fájllal, akkor könnyen generálhat egy ikonkészletet a generáló ikon parancsfájl segítségével.

6. Gyújtsuk meg a CLI-t

meggyullad

A Ignite CLI egy szilárd kezdőkészlet a React Natív alkalmazásokhoz. Egyáltalán nem fizet, az alapértelmezett React Native kazán könnyedén segíti a natív alkalmazások létrehozását. Könnyen telepíthető, és beépítése során betartja a bevált gyakorlatokat, miközben lehetővé teszi a kazánlemezeknek a projekthez történő hozzáigazítását. A dobozon kívül működik mind az Android, mind az iOS. Támogatjuk az önálló plugineket is.

Ezen felül választhat számos kazánlap közül, vagy elindíthatja a sajátját. A moduláris plugin-rendszer lehetővé teszi alkalmazás funkciók hozzáadását vagy a saját részének írását. A használati példa képernyő segít harmadik fél könyvtárainak tesztelésében és több összetevőből álló alkalmazások összeállításában. A képernyő példákat is tartalmaz az alapvetõ alkotóelemekkel épített, általánosan használt alkalmazásokra. Annak érdekében, hogy megkönnyítse az összetevők azonosítását és azok könnyű módosítását, ez a képernyő regisztrálja az összetevő fájljainak példáit is. Ezen a képernyőn kipróbálhatja, használhatja és megoszthatja az összetevőket a csapatával. A Ignite CLI több mint 10 000 csillagot keresett Github.

7. Reagáljon a natív térképképre

reagál-natív térképek

Az egyik a React Natív komponens könyvtárak, amely térképkomponenseket kínál az Android és az iOS számára, a React Natív Térkép nézet. Felépítése olyan, hogy a térkép rendszeres funkciói, például markerek és sokszögek, a Mapview összetevő gyermekei lesznek. Ez segíti az API-t, hogy deklaratív módon irányítsa a térkép funkcióit intuitív módon. Ön részéről gondoskodnia kell a Google Maps API engedélyezéséről a Google konzolban.

Sokat tehetünk a térképstílus testreszabásához. Megváltoztathatja a térképnézet pozícióját, a nyomkövetési régiót / helyet, és kattinthatóvá teheti az érdekes pontokat a Google Maps szolgáltatásban. Engedélyezheti a nagyítást a meghatározott jelölőkre vagy koordinátákra, vagy akár animálhatja őket. Ha animált régió értéket rendel hozzá a támaszponthoz, a Mapview felhasználhatja az Animált API-t a térkép közepének és nagyításának vezérlésére. Az egyedi jelölők megadása nélkül az alapértelmezett jelölők kerülnek megjelenítésre.

Ami remek, hogy a jelölők húzhatók, képeikkel testreszabhatók, és a húzás során frissítik a többi felhasználói felületet. Ha többre van szüksége, van egyéni felirat a markerekre, a sokszög-készítőkre, valamint a kör- és sokszög-átfedésekre. Az iOS felhasználók gradiens vonalláncokat hozhatnak létre. Nem meglepő, hogy 10 000+ csillaggal rendelkezik Github.

8. Reaktív tehetséges csevegő

reagál-natív tehetséges chat

Ahogy a neve is sugallja, a React Natív Tehetséges Csevegő segít létrehozni a csevegő felhasználói felületet a React Natív (és web) számára. A TypeScript-rel írt, teljesen testreszabható összetevőket tartalmaz, amelyek elősegítik a korábbi üzenetek betöltését vagy az üzenetek másolását a vágólapra és így tovább. Van egy InputToolbar is, amely segít a felhasználóknak a billentyűzet kihagyásában.

A felhasználói élmény fokozása érdekében lehetővé teszi az Avatárt, mint a felhasználó kezdőbetűit, a lokalizált dátumokat, a többsoros szövegbevitelt, a gyors válaszüzeneteket (botot) és a rendszerüzeneteket. A Redux is támogatást kapott. A tehetséges csevegőn 8000+ csillag van Github.

9. Reaktív natív felhasználói felület cica

reagál-natív ui-cica

Az egyik olyan React Natív komponens könyvtár, amely bármely domain, beleértve az e-kereskedelmet, mobilalkalmazásainak kezdőkészletének is használható, a React Native UI Kitten – a React natív implementációja a Eva Design rendszer. 5000+ csillaggal rendelkezik Github, Kínál körülbelül 20 általános célú alkatrészt, amelyek ugyanúgy vannak kialakítva, hogy ügyeljenek a látvány megjelenésére.

Ezzel a örökre ingyenes és nyílt forráskódú könyvtárral használhatja a biztosított témákat, vagy annyi saját témát hozhat létre, mindezt az összetevők forráskódjának megváltoztatása nélkül. Ráadásul válthat a sötét és a világos témák között a futási időben is, anélkül, hogy újra kellene töltenie az oldalt. Miután telepítette az UI Kitten csomagot az NPM-ből, importálhatja az összetevőket, és elkezdi használni őket a projektben.

10. Reaktív natív papír

reactnativepaper

Egy másik ingyenes és nyílt forráskódú könyvtár a React Native Paper. Ennek az összes fő alkotóeleme van, és ezeket az összetevőket a Google Anyagtervezési Szabványai szerint alakították ki.

A papír több platformon keresztül működik, és interneten és mobilon is működik. Vannak összetevők és interakciók, amelyek szinte minden felhasználási esethez megfelelnek. A legtöbb részlet, beleértve az animációkat, az akadálymentességet és az felhasználói felület logikáját, gondoskodik. Testreszabhatja az alapértelmezett színeket, vagy elkészítheti a sajátját. Emellett teljes támogatást igényel, valamint a sötét és a világos mód közötti váltást is lehetővé teszi. Tovább Github, összegyűjti 4000+ csillagot.

11. Reaktív natív anyagkészlet

reagálnak-natív-anyag-készlet

A React Natív komponens könyvtáraink listáján következő újabb felhasználói felület-összetevők találhatók, amelyek az anyagtervezést a React Natívhoz vezetik. Belül található gombok, kártyák, távolságcsúszkák és szövegmezők. Emellett a tárcsákat és a folyamatjelző sávokat is megjeleníti a betöltés megjelenítéséhez, valamint a kapcsológombok, a rádiógombok és a jelölőnégyzetek kapcsolóit.

Csak néhány sornyi kód szükséges ahhoz, hogy gombokat adjon hozzá előre meghatározott építőkkel, amelyek betartják az Anyagtervezés alapértelmezett témáját. Az építő használatával testreszabott gombokat is létrehozhat a semmiből. Ugyanez vonatkozik a beépített szövegmezőkre. Nemcsak hogy testreszabhatja a stílusokat a globális téma megváltoztatásával. Ez az összes alkalmazás jelölőnégyzetét és választógombját érinti. Tovább Github, ez a könyvtár 4700 csillagot szerez.

12. Reagáljon a natív anyag felhasználói felületét

reagál-natív anyag-ui

A React Natív Anyag felhasználói felülete közel 20 komponenst kínál a React Natív számára. Az összetevők tartalmazzák a működési gombokat, avatárokat, alfejezeteket, fiókokat, elválasztókat, eszköztárakat és így tovább. Ezek az alkatrészek nagymértékben testreszabhatók, és szerkezetükben anyagtervezést használnak. A téma bármilyen testreszabása kiterjeszthető más komponensekre is, beleértve azokat is, amelyeket önmagára épít. Helyi változtatások végrehajthatók a stílusok felülbírálásával, ahol csak szükséges.

Abban az esetben, ha már használja a React natív vektorikonokat, a telepítésnek nem sok tennivalója van. Egyébként le kell töltenie anyag ikonok az Android és győződjön meg róla, hogy van Roboto iOS esetén. Ez a könyvtár több mint 3000 csillagot keresett Github.

13. RNUILIB

rnuilib

A készlet több mint 60 alkatrészével az RNUILIB közel 2000 csillagot készít Github. Az összes elemhez tartozó élő példákkal együtt, mielőtt felhasználná a projektben, megnézheti a rendelkezésre álló lehetőségeket.

Néhány elem a következőkből áll: animált kép, lapolvasó az előrehaladás jelzésére, avatárok a profilképek megjelenítéséhez, alapvető gombok és gradiens csúszka alkotóelemei.

14. Nachos UI

Nachos UI

A 30 vagy több kész összetevővel, amelyeket bármilyen JavaScripthez vagy a React Native projekthez felhasználhat, a Nachos felhasználói felülete 1900+ csillagot szerez Github. Ami igazán segít abban, hogy nem kell túl sokat aggódnia az alkatrészek stílusa miatt. Csak annyit kell tennie, hogy importálja az előre beállított bemeneteket az egyik összetevőből a másikba. A Nachos UI készlet telepítése után válassza ki a kívánt összetevőt, importálja a megfelelő React natív kódot, majd testreszabhatja azt a projekthez.

Ez az ingyenes, nyílt forráskódú és közösség által vezérelt szoftver az Avocode-t, egy teljes funkcionalitású eszközt használja a Photoshop és a Sketch tervek megosztására és ellenőrzésére. Köszönet Reagáljon natív webre, felhasználhatja web-alapú projektekhez is.

15. Shoutem

shoutem

A Shoutem egy olyan alkalmazásépítő platform, amely kiterjesztések vagy moduláris építőelemek használatával működik, ugyanúgy, mint egy webhely felépítése a WordPress bővítményeivel. 40 vagy több teljes funkcionalitású bővítménnyel 450+ csillagot gyűjtött be Github. A bővítmények közé tartoznak a képek és videók galériái, termékek, rendezvények, étteremmenük és még sok más. Ezeket a nyílt forráskódú kiterjesztéseket szabadon használhatja alkalmazásában. És egyszerűen a villával, bármilyen módon módosíthatja őket.

A Shoutem számos mobil háttér szolgáltatást kínál, például elemzést, felhasználói hitelesítést, elrendezéseket, push értesítéseket és még sok más. Ezenkívül sok jól kódolt téma létezik, amelyeket használhat és testreszabhat. A Shoutem 100% JavaScriptet és a React Native-t használ.

Nos, ez a legjobb React Native komponens könyvtáraink listája. Melyiket választja? Oszd meg a megjegyzésekben.

Ön is érdekli ezeket a cikkeket:

  • Ingyenes reagáló natív sablonok az alkalmazás fejlesztéséhez

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

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