15 Reager indbyggede komponentbiblioteker, som du bør kende i 2020

15 Reager indbyggede komponentbiblioteker, som du bør kende i 2020

15 Reager indbyggede komponentbiblioteker, som du bør kende i 2020
СОДЕРЖАНИЕ
02 июня 2020

Reager indfødte komponentbiblioteker, som du burde kende


React Native component biblioteker kan være en enorm tidsbesparelse, når du arbejder på dit næste app-projekt. Hvorfor? Lad os starte med React selv. Du ved sandsynligvis, at React er et open source JavaScript-bibliotek, der hjælper med at opbygge brugergrænseflader til både webbaserede og mobile apps. Det inkluderer et antal komponenter, som du nemt kan bruge til dine apps.

Når du bygger komponenter i React, skal du normalt style dem til at passe til retningslinjerne for den platform, du målretter mod. Det er her Reager indfødt kan hjælpe. Det er en ramme, du kan bruge til at udvikle mobile apps ved at bruge React sammen med indbyggede funktioner på målplatformen.

Tidligere skrev vi et indlæg med de bedste biblioteker og rammer for UI-komponenter. I dette indlæg ser vi nærmere på React Native component biblioteker specifikt.

Årets bedste reakterede indbyggede komponentbiblioteker

1. NativeBase

Bedste React Native component biblioteker # 1: NativeBase

Hvis du finder dig selv at omskrive React-komponenter til forskellige platforme, skal du give det et fod med NativeBase, en dynamisk front-end ramme. Biblioteket er en samling vigtige tværplatforme React Native-komponenter og er et godt sted at begynde at bygge din app. Komponenterne er bygget med React Native kombineret med nogle JavaScript-funktionaliteter med tilpassbare egenskaber. Du kan også bruge alle tredjeparts indfødte biblioteker ud af boksen.

NativeBase er fuld open source og har 12.000+ stjerner på Github. Temaerne har dog en præmie, når flere funktioner og skærme tilføjes. NativeBase er nu tilgængelig for webbrugere også. Ved hjælp af den samme JavaScript-kodebase og arbejde med platformspecifikt design til Android og iOS kan du opnå et oprindeligt udseende og fornemmelse for din app. Deres open source-projekter inkluderer en Native starter-app, en Twitter Clone-app, en ToDo-app og en tutorial-app. I deres premiumkurv finder du starter-apps til booking, huslejer, joboversigter, messaging og mere.

2. Materiale Kit React Native

Bedste React Native component biblioteker nr. 2: material-kit-react-native

Material Kit React Native tilbyder en gratis indbygget appskabelon med materialedesign. Bygget med Galio-ramme, det redesigner de mest almindelige komponenter for at holde tingene minimale og være i overensstemmelse med Googles materialedesign. Det er nemt at bruge og indeholder 200+ håndlavede elementer som knapper, kort, navigation og indgange. Alle komponenter kan påtage sig farvevariationer ved at foretage ændringer i temaet. Derudover er der fem tilpassede plugins og fem eksempel sider.

Med tæt på 200 stjerner på Github, det tilbyder en Pro version også det giver dig adgang til flere eksempler sider og dokumentation.

3. Reager indfødte elementer

Bedste React Native component biblioteker # 3: react-native-elementer

React Native Elements er et tværsat-platform React Native UI værktøjssæt, der samler et sted et antal store open source UI-komponenter lavet af udviklere. Du kan dyppe ned i pakkerne, der er sammensat af React Native Elements, og være sikker på, at API’et har et ensartet udseende. Det er ikke overraskende, at det har modtaget 17.000 stjerner på Github.

Pakken indeholder en hel kurv med komponenter såsom prisfastsættelse, badge, overlay, divider og platformspecifik søgefelt. De er lette at bruge og virkelig tilpasses. Rekvisitterne til alle komponenter er defineret på et centralt sted, hvilket gør det muligt at opdatere eller ændre komponenter let. Derudover kan det fungere som en platform, der forbinder små teams, der udvikler kommercielle React Native-apps med open source-bidrag.

For at bruge React Native til dine webbaserede projekter er der React Native Web. Det giver mulighed for oprettelse af hurtige, adaptive UI’er i JavaScript og integreres med React Dev-værktøjer. Du kan dele din kodebase mellem React Native-apps og web-apps. Det understøtter type, klik eller skub som indtastningstilstande, har indbygget tilgængelighed og RTL-understøttelse og bruges af Twitter, Uber og Flipkart.

4. Lottie for React Native

Lottie

Lottie er et bibliotek fra Airbnb for mobiler, der hjælper dig med at tilføje animationer til dine apps. Når du har oprettet animationer i Adobe After Effects, skal du normalt konvertere dem til et format, der kan bruges i din webapp. Lottie hjælper dig med dette.

Det fungerer ved at eksportere animationsdata i JSON-format fra en After Effects-udvidelse, BodyMovin. Denne udvidelse er samlet med en JS-afspiller til gengivelse af animationer på nettet. Det fungerer også med React Native, og du kan få adgang til de officielle dokumenter på Github hvor den har samlet næsten 12.000 stjerner.

Lottie-biblioteker og plugins er tilgængelig gratis, og du kan bruge den kuraterede samling af animationsfiler til at gøre dine apps attraktive og interessante. Animationsfilerne er små i størrelse og er i vektorformat. Som sådan bør du ikke opleve nogen indflydelse på ydelsen af ​​din app. På samme tid kan det krydre dit UI og gøre det mere visuelt tiltalende.

5. React Native Vector Icons

reagere-native-vektor-ikoner

Denne er blandt de bedste React Native-komponentbiblioteker, hvis det, du leder efter, er nogle ikoner, du kan bruge i dine apps. Med et bibliotek med 3.000+ ikoner er du temmelig sikker på at finde noget, der passer til dine behov. Derudover er det muligt at tilpasse, style og udvide ikonerne, mens de integreres i dit projekt.

Pakken understøtter TabBar og Toolbar Android samt billedkilde og multi-stil font. Med tæt på 12.000 stjerner på Github, det kan være en perfekt pasform til knapper, logoer og navbars. Det trækker på React Native’s animerede bibliotek kombinere det med ethvert ikon for at oprette en animeret komponent. Hvis du allerede har en ikonfont med tilhørende CSS-fil, kan du nemt generere et ikonsæt med scriptet til generering-ikon.

6. Antænd CLI

antænde

Ignite CLI er et solidt startkit til React Native-apps. Den samlede reaktion Native kedelplade hjælper dig uden problemer med at opbygge native apps. Det installeres nemt og overholder de bedste fremgangsmåder i konstruktionen, mens det giver dig mulighed for at tilpasse kedelpladerne til dit projekt. Ude af boksen fungerer det med både Android og iOS. Der er også understøttelse af uafhængige plugins.

Derudover kan du vælge mellem et antal kedelplader eller starte din egen. Det modulære pluginsystem giver dig mulighed for at tilføje applikationsfunktioner eller skrive dine egne. Et skærm til brugseksempel hjælper dig med at teste tredjepartsbiblioteker og oprette apps, der består af flere komponenter. Skærmen indeholder også eksempler på almindeligt anvendte apps bygget med grundlæggende komponenter. For at hjælpe dig med at identificere komponenterne og foretage ændringer i dem let, registrerer denne skærm også eksemplerne i komponentens filer. Fra denne skærm kan du teste, bruge og dele komponenter med dit team. Ignite CLI har tjent 10.000+ stjerner på Github.

7. Reager Native Mapview

reagere-native-maps

Et af React Native-komponentbibliotekerne, der tilbyder kortkomponenter til Android og iOS, er React Native Mapview. Dens konstruktion er sådan, at regelmæssige funktioner på ethvert kort, f.eks. Markører og polygoner, er specificeret som børn af Mapview-komponenten. Dette hjælper API’en til deklarativt at kontrollere funktioner på kortet intuitivt. Fra din side skal du sikre dig, at Google Maps API aktiveres i Google-konsollen.

Der er meget, du kan gøre for at tilpasse kortstilen. Du kan ændre kortvisningsposition, spore region / placering og gøre interessante steder, der kan klikkes på Google Maps. Du kan aktivere zoom ind på specificerede markører eller koordinater eller endda animere dem. Hvis du tildeler en animeret regionværdi til rekvisitten, kan Mapview bruge det animerede API til at kontrollere kortets center og zoom. Medmindre du specificerer brugerdefinerede markører, gengives standardmarkører.

Det, der er cool, er, at markørerne kan trækkes, kan tilpasses ved hjælp af billeder, og de opdaterer andre brugergrænseflader under træk. Hvis du har brug for mere, er der brugerdefineret callout til markører, polygonskabere og cirkel- og polygonoverlays. iOS-brugere kan oprette gradientpolyliner. Ikke overraskende at det har 10.000+ stjerner på Github.

8. Reager Native Gifted Chat

reagere-native-begavede-chat

Som navnet antyder, kan React Native Gifted Chat hjælpe dig med at opsætte en Chat UI til React Native (og web). Det er skrevet med TypeScript og indeholder komponenter, der kan tilpasses fuldt ud, som hjælper med at indlæse tidligere beskeder eller kopiere beskeder til udklipsholder og mere. Der er også en InputToolbar, der hjælper brugere med at springe tastaturet over.

For at forbedre brugeroplevelsen muliggør det Avatar som brugers initialer, lokaliserede datoer, multi-line TextInput, hurtige svarmeddelelser (bot) og systemmeddelelse. Der er også støtte til Redux. Begavet chat har 8.000+ stjerner på Github.

9. Reager Native UI Kitten

reagere-native-ui-killing

Et af React Native-komponentbibliotekerne, der kan bruges som startkit til mobile apps til ethvert domæne, inklusive eCommerce, er React Native UI Kitten – en React Native-implementering af Eva Design system. Med en bedømmelse af 5.000+ stjerner på Github, det tilbyder et sæt på ca. 20 generelle komponenter, der er designet på samme måde til at tage sig af det visuelle udseende.

Med dette evigt gratis og open source bibliotek kan du bruge de leverede temaer eller oprette så mange egne temaer, alt uden at ændre kildekoden for komponenterne. Derudover kan du skifte mellem mørke og lyse temaer i runtime uden at skulle genindlæse siden. Når du har installeret UI Kitten-pakken fra NPM, kan du importere komponenterne og begynde at bruge dem i dit projekt.

10. React Native Paper

reactnativepaper

Et andet gratis og open source-bibliotek er React Native Paper. Det har alle de vigtigste komponenter, og disse komponenter er designet i overensstemmelse med Googles standarder for materialedesign.

Papir er tværplatform og fungerer på både web og mobil. Der er komponenter og interaktioner, der passer til næsten ethvert brugssagsscenario. De fleste detaljer, inklusive animationer, tilgængelighed og UI-logik, er taget hånd om. Du kan tilpasse standardfarver eller lave dine egne. Derudover har du fuld understøttelse af temaer samt muligheden for at skifte mellem mørke og lyse tilstande. På Github, det holder op til 4.000+ stjerner.

11. React Native Material Kit

reagere-native-materiale-kit

Næste på vores liste over React Native-komponentbiblioteker er endnu et sæt UI-komponenter, der bringer materialedesign til React Native. Inde inde finder du knapper, kort, skyder til rækkevidde og tekstfelter. Du kan også se spinnere og statuslinjer til visning af indlæsning samt skift til switches, radioknapper og afkrydsningsfelter.

Alt, hvad det kræver, er et par kodelinjer for at tilføje knapper ved hjælp af foruddefinerede buildere, der overholder standardtemaet Material design lite. Ved hjælp af builder kan du også oprette tilpassede knapper fra bunden. Det samme er tilfældet for indbyggede tekstfelter. Ikke kun det, du kan tilpasse stilarterne ved at ændre det globale tema. Dette vil påvirke alle afkrydsningsfelter og radioknapper i hele appen. På Github, dette bibliotek samler 4.700 stjerner.

12. React Native Material UI

reagere-native-materiale-ui

React Native Material UI tilbyder næsten 20 komponenter til React Native. Komponenterne inkluderer handlingsknapper, avatarer, underoverskrifter, skuffer, skillelinjer, værktøjslinjer og mere. Disse komponenter er meget tilpasselige og bruger materialedesign i deres konstruktion. Enhver tilpasning, du foretager til temaet, kan også udvides til andre komponenter, inklusive alt, hvad du bygger på din egen. Lokale ændringer kan foretages ved at tilsidesætte stilarter, hvor det er nødvendigt.

Hvis du allerede bruger React Native Vector Icons, er der ikke meget at gøre ved installationen. Ellers bliver du nødt til at downloade materielle ikoner til Android og sørg for, at du har det Roboto til iOS. Dette bibliotek har tjent 3.000+ stjerner på Github.

13. RNUILIB

rnuilib

Med mere end 60 komponenter i dette sæt ure RNUILIB næsten 2.000 stjerner på Github. Med levende eksempler inkluderet for alle komponenter, kan du tjekke de tilgængelige indstillinger, før du bruger det i dit projekt.

Nogle af komponenterne er: et animeret billede, en scanner til at indikere fremskridt, avatarer til at vise profilbilleder, grundlæggende knapper og gradientskydekomponenter.

14. Nachos UI

Nachos UI

Med 30+ færdige komponenter, som du kan bruge til ethvert JavaScript- eller React Native-projekt, scorer Nachos UI 1.900+ stjerner på Github. Hvad der virkelig hjælper er, at du ikke behøver at bekymre dig for meget om at style nogen komponent. Alt hvad du skal gøre er at importere de forudindstilede input fra en komponent til en anden. Når du har installeret Nachos UI-sæt, skal du vælge den ønskede komponent, importere den tilsvarende React Native-kode og derefter fortsætte med at tilpasse den, så den passer til dit projekt.

Denne gratis open source og community-drevet software bruger Avocode, et fuldt udstyret værktøj til at dele og inspicere Photoshop og Sketch-design. Tak til React Native for web, Du kan også bruge det til webbaserede projekter.

15. Shoutem

shoutem

Shoutem er en app-bygningsplatform, der fungerer ved hjælp af udvidelser eller modulære byggesten, ligesom at bygge et websted med plugins på WordPress. Med 40+ komplette udvidelser er det samlet 450+ stjerner på Github. Udvidelser inkluderer gallerier til fotos og videoer, produkter, begivenheder, restaurantmenuer og mere. Du kan bruge disse open source-udvidelser frit i din app. Og ved blot at gafle dem, kan du ændre dem, som du vil.

Shoutem tilbyder mange mobile back-end-tjenester såsom analyse, brugergodkendelse, layout, push-meddelelser og mere. Der er desuden mange godt kodede temaer, som du kan bruge og tilpasse. Shoutem bruger 100% JavaScript og React Native.

Det er vores liste over de fineste React Native komponentbiblioteker. Hvilken er din valg? Del i kommentarerne.

Du kan også være interesseret i disse artikler:

  • Gratis reaktive skabeloner til appudvikling

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

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