15, 2020-ci ildə bilməli olduğunuz Doğma Komponent Kitabxanaları

15, 2020-ci ildə bilməli olduğunuz Doğma Komponent Kitabxanaları

15, 2020-ci ildə bilməli olduğunuz Doğma Komponent Kitabxanaları
СОДЕРЖАНИЕ
02 июня 2020

Bilməlisiniz Doğma Komponent Kitabxanalarına reaksiya verin


Reaktiv Doğma komponent kitabxanalarınız növbəti tətbiqetməyiniz layihəsi üzərində işləyərkən böyük vaxt qoruyucu ola bilər. Necə gəlib? Yaxşı, reaksiya özü ilə başlayaq. Yəqin ki, React həm veb əsaslı, həm də mobil tətbiqlər üçün istifadəçi interfeyslərinin qurulmasında kömək edən açıq mənbəli JavaScript kitabxanası olduğunu bilirsiniz. Buraya tətbiqləriniz üçün asanlıqla istifadə edə biləcəyiniz bir sıra komponentlər daxildir.

Adətən React-də komponentlər qurarkən hədəf aldığınız platformanın təlimatlarına uyğun tərtib etməlisiniz. Budur Doğma reaksiya kömək edə bilər. Hədəf platformasının doğma imkanları ilə birlikdə React istifadə edərək mobil tətbiqetmələri inkişaf etdirmək üçün istifadə edə biləcəyiniz bir çərçivədir.

Daha əvvəl, ən yaxşı UI komponent kitabxanaları və çərçivələri əks etdirən bir yazı yazdıq. Bu yazıda xüsusi olaraq React Native komponent kitabxanalarını daha yaxından nəzərdən keçirəcəyik.

İlin ən yaxşı reaktiv doğma komponent kitabxanaları

1. NativeBase

Best React Native komponent kitabxanaları # 1: NativeBase

Fərqli platformalar üçün React komponentlərini yenidən yazmağı taparsanız, NativeBase, dinamik bir ön çərçivə ilə bir yol verməlisiniz. Kitabxana əsas cross-platform React Native komponentlərinin toplusudur və tətbiqinizi qurmağa başlamaq üçün yaxşı bir yerdir. Komponentlər özelleştirilebilir xüsusiyyətləri olan bəzi JavaScript funksiyaları ilə birləşdirilmiş React Native ilə qurulmuşdur. Qutudan kənar üçüncü tərəf yerli kitabxanalardan da istifadə edə bilərsiniz.

NativeBase tam açıq mənbəyidir və üzərində 12,000+ ulduz var Github. Bununla birlikdə, daha çox xüsusiyyətlər və ekranlar əlavə edildiyi üçün mövzular bir mükafata gəlir. NativeBase artıq mövcuddur veb istifadəçiləri də. Eyni JavaScript kod bazasından istifadə edərək və Android və iOS üçün platforma xüsusi dizaynla işləyərək, tətbiqiniz üçün doğma bir görünüş əldə edə bilərsiniz. Onların açıq mənbə layihələrinə Doğma bir başlanğıc tətbiqetməsi, Twitter Clone tətbiqi, ToDo tətbiqetməsi və bir tutorial tətbiqetməsi daxildir. Mükafat səbətində sifariş, icarə, iş siyahıları, mesajlaşma və daha çox üçün yeni tətbiqetmələr tapa bilərsiniz.

2. Material dəsti reaktivdir

Best React Native komponent kitabxanası # 2: material-kit-reaksiya-doğma

Material Kit React Native material dizaynı ilə pulsuz yerli tətbiq şablonu təqdim edir. Ilə tikilib Galio çərçivəsi, şeyləri minimal səviyyədə saxlamaq və Google-ın material dizaynına uyğun olmaq üçün ən çox yayılmış komponentləri yenidən hazırlayır. İstifadəsi asandır və düymələr, kartlar, naviqasiya və giriş kimi 200 + əl işlənmiş elementləri ehtiva edir. Bütün komponentlər mövzuya dəyişiklik edərək rəng dəyişikliyini qəbul edə bilər. Bundan əlavə, beş xüsusi plugin və beş nümunə səhifəsi var.

200-ə yaxın ulduz ilə Github, təklif edir Pro versiyası daha çox nümunə səhifələrinə və sənədlərə giriş imkanı verir.

3. Doğma elementlərə reaksiya verin

Ən yaxşı reaktiv doğma komponent kitabxanaları # 3: reaksiya-doğma elementlər

Reaktiv Doğma Elementlər, inkişaf etdiricilər tərəfindən hazırlanmış bir sıra böyük açıq mənbə UI komponentlərini bir yerə toplayan çarpaz platforma reaktiv doğma UI alətlər dəstidir. React Native Elements tərəfindən qoyulmuş paketlərə batıra bilərsiniz və API-nin ardıcıl görünüş və hiss etdiyinə əmin olun. Təəccüblü deyil ki, 17000 ulduz aldı Github.

Paketdə qiymət, döş nişanı, üst-üstə düşmə, bölmə və platforma xüsusi axtarış çubuğu kimi komponentlərin bütöv bir səbəti var. Onlardan istifadə etmək asandır və həqiqətən özelleştirilebilir. Bütün komponentlər üçün rekvizit, bir komponenti asanlıqla yeniləməyə və dəyişdirməyə imkan verən bir mərkəzi yerdə müəyyən edilmişdir. Bundan əlavə, açıq mənbə töhfəsi ilə kommersiya React Native tətbiqetmələrini inkişaf etdirən kiçik komandaları birləşdirən bir platforma kimi xidmət edə bilər.

Veb əsaslı layihələriniz üçün React Native istifadə etmək üçün var Doğma İnternetə reaksiya verin. JavaScript-də sürətli, uyğunlaşan UI-lər yaratmağa imkan verir və React Dev alətləri ilə inteqrasiya olunur. Kod bazanızı React Native tətbiqləri və veb tətbiqləri arasında paylaşa biləcəksiniz. Giriş rejimi olaraq növü, vurun və ya sürüşdürün, daxili əlçatanlıq və RTL dəstəyi var və Twitter, Uber və Flipkart bəyənənlər tərəfindən istifadə olunur.

4. Reaktiv Doğma üçün Lottie

lottie

Lottie, tətbiqlərinizə animasiya əlavə etməyə kömək edəcək mobil telefonlar üçün bir kitabxanadır. Adətən, Adobe After Effects-də animasiyalar yaratdıqdan sonra onları veb tətbiqetmənizdə lazımlı bir formata çevirməlisiniz. Lottie sizə bu işdə kömək edir.

BodyMovin, After Effects genişləndirməsindən JSON formatında animasiya məlumatlarını ixrac etməklə işləyir. Bu uzantı İnternetdə animasiyalar göstərmək üçün JS pleyeri ilə birləşdirilmişdir. React Native ilə də işləyir və rəsmi sənədlərə daxil ola bilərsiniz Github burada 12000-ə yaxın ulduz qazandı.

Lottie kitabxanaları və plaginləri var pulsuz mövcuddur, və tətbiqlərinizi cəlbedici və maraqlı etmək üçün hazırlanmış animasiya sənədləri toplusundan istifadə edə bilərsiniz. Animasiya sənədləri kiçik ölçülü və vektor formatındadır. Buna görə tətbiqinizin fəaliyyətinə təsir göstərməməlisiniz. Eyni zamanda, UI-ni daha da artıra bilər və daha vizual cəlbedici edə bilər.

5. Doğma Vektor nişanlarına reaksiya verin

reaksiya-doğma-vektor-nişanlar

Əgər axtardığınız şey tətbiqlərinizdə istifadə ediləcək nişanlardırsa, bu ən yaxşı reaktiv yerli komponent kitabxanalarından biridir. 3000+ nişandan ibarət bir kitabxana ilə ehtiyaclarınıza uyğun bir şey tapacağınıza çox inanırsınız. Bundan əlavə, layihələrinizə daxil edərkən nişanları düzəltmək, tərtib etmək və genişləndirmək mümkündür.

Paket TabBar və Toolbar Android, həmçinin görüntü mənbəyi və çox tərzli şriftə dəstək verir. 12000-ə yaxın ulduz var Github, düymələr, loqotiplər və navbarlar üçün mükəmməl bir uyğunluq ola bilər. Çəkir Doğma Cizgi Kitabxanasına reaksiya verin cizgi komponenti yaratmaq üçün hər hansı bir simge ilə birləşdirərək. Artıq əlaqəli CSS faylı ilə bir simge şriftiniz varsa, onda asanlıqla generate-icon skripti ilə qurulmuş bir simge yarada bilərsiniz.

6. CLI-ni alovlandırın

alovlandırmaq

Ignite CLI, React Native tətbiqləri üçün möhkəm bir başlanğıc dəstidir. Heç bir dəyəri olmadan, standart React Native qazan qazanması, doğma tətbiqlər qurmağınıza kömək edir. Qazan plitələrini layihənizə uyğunlaşdırmağa imkan verərkən asanlıqla quraşdırır və qurulmasında ən yaxşı təcrübələrə riayət edir. Qutudan kənarda həm Android, həm də iOS ilə işləyir. Bağlı plaginlər üçün də dəstək var.

Bundan əlavə, bir sıra qazan qablarından birini seçə bilərsiniz və ya özünüzə başlamalısınız. Modul plagin sistemi tətbiq xüsusiyyətlərini əlavə etmək və ya özünüzü yazmaq imkanı verir. Bir istifadə nümunəsi ekranı, üçüncü tərəf kitabxanalarını sınamağa və çox komponentdən ibarət tətbiqlər qurmağa kömək edir. Ekranda fundamental komponentlərlə qurulmuş çox istifadə olunan tətbiqlərin nümunələri də var. Komponentləri müəyyənləşdirməyə və onlara asanlıqla dəyişiklik etməyə kömək etmək üçün bu ekran komponentlərin sənədlərindəki nümunələri də qeyd edir. Bu ekrandan, komanda ilə komponentləri sınaya, istifadə edə və paylaşa bilərsiniz. Ignite CLI 10.000+ ulduz qazandı Github.

7. Doğma Mapview’a reaksiya verin

reaksiya-doğma-xəritələr

Android və iOS üçün xəritə komponentləri təklif edən React Native komponent kitabxanalarından biri də React Native Mapview-dir. Onun qurulması belədir ki, hər hansı bir xəritədə markerlər və çoxbucaqlılar kimi müntəzəm xüsusiyyətlər Mapview komponentinin övladları kimi göstərilir. Bu API xəritədəki xüsusiyyətləri intuitiv şəkildə idarə etmək üçün kömək edir. Sizin tərəfinizdən Google Konsolda Google Xəritələr API-nin effektiv olmasını təmin etməlisiniz.

Xəritə tərzini düzəltmək üçün edə biləcəyiniz çox şey var. Xəritə xəritəsini dəyişdirə, bölgəni / məkanı izləyə və Google Xəritədə maraq nöqtələrini tıklanabilir edə bilərsiniz. Göstərilən markerlər və ya koordinatların böyüdülməsini təmin edə və ya hətta onları canlandıra bilərsiniz. Dəstə bir cizgi bölgəsi dəyəri təyin etsəniz, Mapview xəritənin mərkəzini və böyütməsini idarə etmək üçün Animated API-dən istifadə edə bilər. Xüsusi markerləri göstərməsəniz, standart markerlər göstəriləcəkdir.

İşarələdicilər sürüklənə biləndir, şəkillərdən istifadə edərək düzəldilə bilər və sürüşmə zamanı digər UI-lərini yeniləyirlər. Daha çox ehtiyacınız varsa, markerlərə, çoxbucaqlı yaradanlara və dairə və çoxbucaqlı örtüklərə xüsusi zəng var. iOS istifadəçiləri gradient polylines yarada bilərlər. 10,000+ ulduzunun olması təəccüblü deyil Github.

8. Doğma istedadlı söhbətə reaksiya verin

reaksiya-doğma-istedadlı-söhbət

Adından da göründüyü kimi, Reaktiv Doğma Çağırışlı Çat Reaktiv Native (və veb) üçün Chat UI qurmağınızda sizə kömək edəcəkdir. TypeScript ilə yazılmış, əvvəllər göndərilən mesajları yükləməyə və ya mesajları panoya və s. İstifadəçilərə klaviaturanı atlamağa kömək edən InputToolbar da var.

İstifadəçi təcrübəsini artırmaq üçün Avatar-a istifadəçi adları, lokallaşdırılmış tarixlər, çox xətli TextInput, sürətli cavab mesajları (bot) və sistem mesajı kimi imkanlar verir. Redux-a da dəstək var. İstedadlı Çatda 8000 + ulduz var Github.

9. Doğma UI Kitten reaksiya verin

reaksiya-doğma-ui-doğmaq

Elektron ticarət də daxil olmaqla hər hansı bir domen üçün mobil tətbiqetmələr üçün başlanğıc dəsti olaraq istifadə edilə bilən React Native komponent kitabxanalarından biri də React Native UI Kitten – bu Reaktiv Native tətbiqidir Eva Dizayn sistemi. 5000+ ulduz reytinqi ilə Github, vizual görünüşü baxımından eyni şəkildə tərtib edilmiş təxminən 20 ümumi təyinatlı bir dəst təklif edir.

Bu əbədi pulsuz və açıq mənbə kitabxanası ilə, təqdim olunan mövzuları istifadə edə bilərsiniz və ya komponentlərin qaynaq kodunu dəyişdirmədən öz mövzularınızı yarada bilərsiniz. Bundan əlavə, səhifəni yenidən yükləməyə ehtiyac qalmadan iş vaxtında qaranlıq və açıq mövzular arasında keçid edə bilərsiniz. UI Kitten paketini NPM-dən qurduqdan sonra, komponentləri idxal edə və layihənizdə istifadə etməyə başlaya bilərsiniz.

10. Doğma Kağıza reaksiya verin

reaktiv divar kağızı

Digər bir pulsuz və açıq mənbəli kitabxana reaktiv doğma sənəddir. Bütün əsas komponentlərə malikdir və bu komponentlər Google-ın Material dizayn standartlarına uyğun hazırlanmışdır.

Kağız çarpaz platformadır və həm vebdə, həm də mobil cihazlarda işləyir. Demək olar ki, hər istifadə vəziyyətinə uyğun olan komponentlər və qarşılıqlı təsir var. Animasiyalar, əlçatanlıq və UI məntiqi də daxil olmaqla əksər təfərrüatlara diqqət yetirilir. Defolt rəngləri düzəldə və ya özünüz edə bilərsiniz. Bundan əlavə, tam tematik dəstəyiniz, həmçinin qaranlıq və işıq rejimlərinə keçid seçiminiz var. Yandırın Github, 4000 + ulduz yığır.

11. Doğma material dəsti

reaksiya-doğma-material dəsti

React Native komponent kitabxanalarımızın siyahısında sonrakı yer, reaktiv doğma üçün material dizaynını gətirən daha bir UI komponentidir. İçəridə düymələr, kartlar, diapazon sürgüləri və mətn sahələri tapa bilərsiniz. Yükləməni göstərmək üçün əyirici və tərəqqi çubuğunu, həmçinin açarları, radio düymələrini və onay qutularını dəyişdirə bilərsiniz..

Bütün bunlar Material dizayn lite standart temasına uyğun gələn əvvəlcədən təyin edilmiş inşaatçılardan istifadə edərək düymələri əlavə etmək üçün bir neçə kod xətti. İnşaatçıdan istifadə edərək, sıfırdan xüsusi düymələr də yarada bilərsiniz. Eyni mətn sahələri üçün də eyni vəziyyətdir. Yalnız bu deyil, qlobal mövzunu dəyişdirərək üslubları düzəldə bilərsiniz. Bu, bütün tətbiqetmədə bütün onay qutularına və radio düymələrinə təsir edəcəkdir. Yandırın Github, bu kitabxana 4700 ulduz qazanır.

12. Doğma material UI reaksiya

reaksiya-doğma-material-ui

React Native Material UI, React Native üçün 20-yə yaxın komponent təklif edir. Komponentlərə hərəkət düymələri, avatarlar, alt başlıqlar, çekmece, bölücü, alət çubuğu və daha çox daxildir. Bu komponentlər olduqca özelleştirilebilir və qurulmasında material dizaynından istifadə edirlər. Mövzuya etdiyiniz hər hansı bir özelleştirmə, özünüz hazırladığınız hər şey daxil olmaqla digər komponentlərə də yayıla bilər. Yerli dəyişikliklər lazım olduqda üslublara üstünlük verməklə edilə bilər.

Artıq React Native Vector Nişanlar istifadə etsəniz, quraşdırma yolu ilə çox iş görülməyəcəkdir. Yoxsa yükləməlisiniz Android üçün maddi nişanlar və olduğunuzdan əmin olun Roboto iOS üçün. Bu kitabxana 3000+ ulduz qazandı Github.

13. RNUILIB

rnuilib

Bu dəstdə 60-dan çox komponentdən ibarət olan RNUILIB, təxminən 2000 ulduzun saatlarıdır Github. Bütün komponentlər üçün canlı nümunələr ilə, layihənizdə istifadə etməzdən əvvəl mövcud variantları nəzərdən keçirə bilərsiniz.

Bəzi komponentlər bunlardır: cizgi şəkli, tərəqqi göstərəcək bir skaner, profil şəkillərini göstərmək üçün avatarlar, əsas düymələr və gradient sürgü komponentləri.

14. Nachos UI

Nachos UI

Hər hansı bir JavaScript və ya React Native layihəsi ilə istifadə edə biləcəyiniz 30+ hazır komponentlərlə Nachos UI 1.900+ ulduz qazanır Github. Həqiqətən kömək edən budur ki, hər hansı bir komponenti üslublamaq üçün çox narahat olmaq lazım deyil. Etməli olduğunuz şey əvvəlcədən hazırlanmış girişlərin hər birini bir komponentdən digərinə idxal etməkdir. Nachos UI dəstini qurduqdan sonra istədiyiniz hər hansı bir komponenti seçin, uyğun reaktiv doğma kodu idxal edin və sonra proyektinizə uyğunlaşdırmaq üçün davam edin.

Bu pulsuz, açıq mənbəli və icma tərəfindən idarə olunan proqram Photoshop və Sketch dizaynlarını bölüşmək və yoxlamaq üçün tam özəl bir vasitə olan Avocode-dan istifadə edir. Sayəsində Veb üçün doğma reaksiya, veb əsaslı layihələr üçün də istifadə edə bilərsiniz.

15. Şoutem

qışqırıq

Shoutem, uzantıları və ya modul bina bloklarını istifadə edərək işləyən, bir qədər WordPress-də eklentləri olan veb sayt qurmağa bənzər bir tətbiq tikinti platformasıdır. 40+ tam xüsusiyyətli uzantılarla 450+ ulduz toplanır Github. Uzantılara foto və video, məhsullar, hadisələr, restoran menyuları və daha çox şey üçün qalereyalar daxildir. Bu açıq mənbəli genişləndirmələri tətbiqinizdə sərbəst istifadə edə bilərsiniz. Və sadəcə onları çəngəlləməklə onları istədiyiniz şəkildə dəyişdirə bilərsiniz.

Shoutem analitik, istifadəçi identifikasiyası, layout, push bildirişləri və daha çox kimi bir çox mobil geri xidmət təklif edir. Bundan əlavə, istifadə və özelleştirmek üçün bir çox yaxşı kodlu mövzular var. Shoutem 100% JavaScript və React Native istifadə edir.

Yaxşı, React Native komponent kitabxanalarımızın siyahısı budur. Hansınız seçirsiniz? Şərhlərdə paylaşın.

Bu yazılarla da maraqlana bilərsiniz:

  • Tətbiq inkişafı üçün pulsuz reaktiv doğma şablonları

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

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