Biblioteke komponenti zbirka su prilagodljivog koda koji se može ponovno upotrijebiti i koji se može prilagoditi uzorku dizajna određene aplikacije. Pomažu u održavanju dosljednog dizajna na svim platformama i ubrzavaju proces razvoja.
Ovdje ćete naučiti kako koristiti biblioteku komponenti React Native Elements prilikom izrade vaše sljedeće React Native aplikacije.
Što su React Native Elements?
React Native Elements (RNE) je open-source pokušaj React Native programera za stvaranje biblioteke komponenti koja može biti korisna pri izradi Android, iOS i web aplikacija. Za razliku od mnogih druge React Native biblioteke komponenti, RNE podržava TypeScript sintaksu.
Knjižnica se sastoji od preko 30 komponenti koje se fokusiraju na strukturu komponenti.
Instaliranje Reactive Native Elements s React Native CLI
Sljedeće upute odnose se na instaliranje React Native Elements u projekt kreiran pomoću React Native cli.
Instalirajte React Native Elements u svoju golu React Native aplikaciju pokretanjem:
npm instalirati @rneui/themed @rneui/base
Također biste trebali instalirati react-native-vector-icons i safe-area-context:
npm instalirati reagirati-domaći-vektorske-ikone reagiraju-domaći-sef-područje-kontekst
Kako instalirati React Native Elements u Expo projekt
Da biste instalirali React Native Elements u postojeći Expo projekt, instalirajte paket i reagirajte-native-safe-area-context:
pređe dodati @rneui/themed @rneui/bazna reakcija-domaći-kontekst-sigurnog područja
Održavajte jedan upravitelj paketa kao što je npm ili yarn dok instalirate pakete kako biste izbjegli rizik od sukoba ovisnosti.
Projekti napravljeni korištenjem expo cli imaju react-native-vector-icons instalirane prema zadanim postavkama, tako da ih ne morate instalirati.
Oblikovanje komponenti izvornih elemenata s jednom reakcijom
Sve komponente dostupne putem RNE-a koriste različite rekvizite za oblikovanje komponente i spremnika komponente.
Spremnik komponente je osnovni oznaka koja se omotava oko oznake komponente, poput. The oznaka je nepobjediva oko komponente i zauzima a kontejnerStil rekvizit za primjenu stilova prikaza.
Komponenta može primiti zadane stilske rekvizite poput boja, tip, i veličina. Komponenta također može dobiti jedinstveni prilagođeni stil za rukovanje stilovima komponente.
Ovo su sve vanjski stilovi za komponentu.
Na primjer, stiliziranje Dugme komponenta:
uvoz { Pogled } iz "reagirati izvorno";
uvoz { Dugme } iz "@rneui/tematski";
konst Moja komponenta = () => {
povratak (
<Pogled>
<Dugme
buttonStyle={{ backgroundColor: "siva" }}
containerStyle={{ width: 150 }}
>
Čvrsto dugme
</Button>
<Dugme
vrsta="obris"
containerStyle={{ width: 150, margin: 10 }}
naslov="Gumb obrisa"
/>
</View>
);
}
Gornji kod pokazuje kako možete primijeniti stilove na komponentu Button. One Button koristi zadanu postavku tip podupirač, a drugi koristi običaj buttonStyle oslonac Oba gumba također koriste kontejnerStil prop za dodavanje stilova prikaza.
Stvaranje tema za React Native Elements komponente
Stvaranje tema za RNE komponente korisno je kada želite primijeniti stil na svaku instancu tih komponenti. S temama, prilagođavanje vaših komponenti željenom uzorku dizajna postaje lak zadatak.
RNE pruža a stvorititemu() funkcija za stilske komponente. Ova funkcija će sadržavati stilove teme koji nadjačavaju unutarnje ili zadane stilove svake komponente.
Za izradu teme nazovite stvorititemu() i proslijedite željene stilove teme kao argument funkcije:
uvoz {ThemeProvider, createTheme} iz '@rneui/tematski';
konst tema = stvoritemu({
komponente: {
Dugme: {
containerStyle: {
margina: 10,
},
titleStyle: {
boja: "crno",
},
},
},
});
The ThemeProvider primijenit će stilove na bilo koju komponentu omotanu unutar njega.
Davatelj prihvaća a tema prop koji je postavljen na gore kreiranu temu:
<ThemeProvider theme={theme}>
<Naslov gumba="Tematski gumb" />
</ThemeProvider>
<Naslov gumba="Normalno dugme" />
Stilovi teme nadjačavaju unutarnje ili zadane stilove komponenti, ali neće nadjačati stilove vanjskih komponenti.
RNE-ov redoslijed prvenstva postavlja vanjske stilove na vrh hijerarhije.
Primjer:
// Tema
konst tema = stvoritemu({
komponente: {
Dugme: {
containerStyle: {
margina: 10,
boja pozadine: "Crvena",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Naslov gumba="Tematski gumb" boja={"sekundarni"}/>
</ThemeProvider>
U gornjem kodu, boja pozadine Dugme komponenta će biti sekundarna, što je zelena boja za razliku od stila teme crvene boje.
A tema objekt se isporučuje s RNE-om, pružajući brojne zadane vrijednosti boja odmah po otvaranju. RNE nudi razne opcije poput ThemeConsumer komponenta, koristitemu() kuka, i makeStyles() generator kuke za pristup tema objekt.
The ThemeConsumer komponenta će omotati vaše komponente prikazane anonimnom funkcijom. Ova anonimna funkcija uzima tema kao oslonac.
Vrijednostima teme možete pristupiti pomoću a stil oslonac:
uvoz Reagirati iz 'reagirati';
uvoz { Dugme } iz 'reagirati-nativni';
uvoz { ThemeConsumer } iz '@rneui/tematski';
konst Moja komponenta = () => (
<ThemeConsumer>
{({ tema }) => (
<Naslov gumba="ThemeConsumer" stil={{ boja: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativno, možete koristiti koristitemu() kuka za pristup temi unutar komponente.
Na primjer:
uvoz Reagirati iz 'reagirati';
uvoz { Dugme } iz 'reagirati-nativni';
uvoz {useTheme} iz '@rneui/tematski';konst Moja komponenta = () => {
konst { tema } = useTheme();
povratak (
<Prikaži stil={styles.container}>
<Naslov gumba="useTheme" stil={{ boja: theme.colors.primary }}/>
</View>
);
};
The makeStyles() generator kuka je sličan korištenju stilske tablice za definiranje stilova. Poput lista stilova, odvaja svaki stil izvan vaše prikazane komponente. Pozivanje na tema objekt unutar elementa stila komponente.
Proširivanje tema pomoću TypeScripta
RNE podržava TypeScript deklaracije u vašoj aplikaciji, omogućujući programerima da iskoriste prednosti prednosti korištenja jezika TypeScript.
Uz TypeScripts spajanje deklaracija, možete proširiti definicije tema za dodavanje prilagođenih boja i rekvizita za RNE-ove zadane i prilagođene komponente.
Da biste proširili boje unutar tematskog objekta, izradit ćete zasebni TypeScript.ts datoteku i deklarirajte modul @rneui/tematski unutar datoteke.
Zatim možete dodati svoje prilagođene boje i odrediti njihovu očekivanu vrstu:
// **TypeScript.ts**uvoz '@rneui/themed';
proglasiti modul '@rneui/themed' {
izvoz sučeljeBoje{
primarnoSvjetlo: niz;
secondaryLight: niz;
}
}
Pomoću ovog modula možete proslijediti svoje prilagođene boje kao vrijednosti prilikom izrade teme:
konst tema = stvoritemu({
boje: {
primarno svjetlo: "",
sekundarno svjetlo: ""
},
})
Sada su prilagođene boje dio vašeg objekta teme i može im se pristupiti pomoću ThemeProvider, ThemeConsumer, ili koristitemu() kuka.
RNE komponente vs. Izvorne komponente Reacta
Biblioteke komponenti poput React Native Elements izvrstan su način za brzo pokretanje aplikacije. Oni zadržavaju vaš fokus na strukturi aplikacije, a ne na detaljima dizajna. Korištenje RNE komponenti umjesto komponenti React Native treba se prvenstveno voditi prema fokusu vaše aplikacije i tome koliko vremena za razvoj imate.