Knjižnice komponent so zbirka prilagodljive in ponovno uporabne kode, ki jo je mogoče prilagoditi načrtovalskemu vzorcu določene aplikacije. Pomagajo ohranjati dosledno zasnovo na vseh platformah in pospešijo razvojni proces.

Tukaj se boste naučili, kako uporabljati knjižnico komponent React Native Elements pri gradnji vaše naslednje aplikacije React Native.

Kaj so React Native Elements?

React Native Elements (RNE) je odprtokodno prizadevanje razvijalcev React Native za ustvarjanje knjižnice komponent, ki je lahko uporabna pri gradnji Android, iOS in spletnih aplikacij. Za razliko od mnogih druge knjižnice komponent React Native, RNE podpira sintakso TypeScript.

Knjižnica je sestavljena iz več kot 30 komponent, ki se osredotočajo na strukturo komponent.

Namestitev reaktivnih izvornih elementov z izvornim CLI React

Naslednja navodila so za namestitev izvornih elementov React v projekt, ustvarjen z uporabo cli React Native.

Namestite React Native Elements v svojo golo aplikacijo React Native tako, da zaženete:

instagram viewer 
namestitev npm @rneui/themed @rneui/base

Prav tako morate namestiti react-native-vector-icons in safe-area-context:

npm namestite reagirati-domačin-vektorske-ikone reagirajo-domačin-varno-območje-kontekstu

Kako namestiti izvorne elemente React v projekt Expo

Če želite namestiti React Native Elements v obstoječo Expo projekt, namestite paket in react-native-safe-area-context:

preje dodajte @rneui/themed @rneui/osnovna reakcija-domačin-kontekst-varnega-območja

Med nameščanjem paketov vzdržujte enega upravitelja paketov, kot je npm ali yarn, da se izognete tveganju navzkrižij odvisnosti.

Projekti, zgrajeni s pomočjo expo cli, imajo privzeto nameščene react-native-vector-icons, zato vam jih ni treba namestiti.

Oblikovanje komponent izvornih elementov z enim odzivom

Vse komponente, ki so na voljo prek RNE, uporabljajo različne pripomočke za oblikovanje komponente in vsebnika komponente.

Vsebnik komponente je osnovni ovitje oznake okoli oznake komponente, kot je. The je nepremagljiva okoli komponente in zavzame a containerStyle prop za uporabo slogov pogleda.

Komponenta lahko prejme privzete pripomočke za oblikovanje, kot je barva, vrsta, in velikost. Komponenta lahko prejme tudi edinstven slog po meri za obdelavo slogov komponente.

Vse to so zunanji slogi za komponento.

Na primer, oblikovanje Gumb komponenta:

uvoz { Pogled } od "reagirati-domače";
uvoz {Gumb} od "@rneui/tematsko";
konst MyComponent = () => {
vrnitev (
<Pogled>
<Gumb
 buttonStyle={{backgroundColor: "siva" }}
 containerStyle={{ width: 150 }}
>
 Trden gumb
</Button>
<Gumb
 vrsta="oris"
 containerStyle={{ širina: 150, rob: 10 }}
 naslov="Orisni gumb"
 />
</View>
 );
}

Zgornja koda prikazuje, kako lahko uporabite sloge za komponento Button. One Button uporablja privzeto vrsta prop, drugi pa uporablja po meri buttonStyle prop. Oba gumba uporabljata tudi containerStyle prop za dodajanje slogov pogleda.

Ustvarjanje tem za komponente izvornih elementov React

Ustvarjanje tem za komponente RNE je uporabno, če želite uporabiti slog za vsak primerek teh komponent. S temami postane prilagoditev vaših komponent, da ustrezajo želenemu oblikovalskemu vzorcu, lahka naloga.

RNE zagotavlja a createTheme() funkcijo za oblikovanje komponent. Ta funkcija bo vsebovala sloge tem, ki preglasijo notranje ali privzete sloge vsake komponente.

Za izdelavo teme pokličite createTheme() in posredujte želene sloge teme kot funkcijski argument:

uvoz { ThemeProvider, createTheme } od '@rneui/themed';
konst tema = createTheme({
 komponente: {
 Gumb: {
 containerStyle: {
 rob: 10,
 },
 titleStyle: {
 barva: "Črna",
 },
 },
 },
});

The ThemeProvider bo uporabil sloge za vse komponente, ki so ovite v njem.

Ponudnik sprejema a tema prop, ki je nastavljen na zgoraj ustvarjeno temo:

<ThemeProvider theme={tema}>
<Naslov gumba="Tematski gumb" />
</ThemeProvider>
<Naslov gumba="Normalni gumb" />
2 Slike

Slogi teme preglasijo notranje ali privzete sloge komponente, ne bodo pa preglasili sloga zunanje komponente.

Vrstni red RNE postavlja zunanje sloge na vrh hierarhije.

primer:

// Tema
konst tema = createTheme({
 komponente: {
 Gumb: {
 containerStyle: {
 rob: 10,
 Barva ozadja: "rdeča",
 },
 },
 },
});
//Component
<ThemeProvider theme={tema}>
<Naslov gumba="Tematski gumb" barva={"sekundarni"}/>
</ThemeProvider>

V zgornji kodi je barva ozadja Gumb komponenta bo sekundarna, to je zelena barva v nasprotju s slogom teme rdeče.

A tema predmet je dobavljen z RNE, ki zagotavlja številne privzete barvne vrednosti takoj po namestitvi. RNE ponuja različne možnosti, kot je ThemeConsumer komponenta, useTheme() kavelj, in makeStyles() generator za dostop do tema predmet.

The ThemeConsumer komponenta bo ovila vaše komponente, upodobljene z anonimno funkcijo. Ta anonimna funkcija traja tema kot rekvizit.

Do vrednosti teme lahko dostopate z a stil rekvizit:

uvoz Reagiraj od 'reagirati';
uvoz {Gumb} od 'react-native';
uvoz { ThemeConsumer } od '@rneui/themed';
konst MyComponent = () => (
<ThemeConsumer>
 {({ tema }) => (
<Naslov gumba="ThemeConsumer" style={{ barva: theme.colors.primary }} />
 )}
</ThemeConsumer>
)

Lahko pa uporabite tudi useTheme() kavelj za dostop do teme znotraj komponente.

Na primer:

uvoz Reagiraj od 'reagirati';
uvoz {Gumb} od 'react-native';
uvoz {useTheme} od '@rneui/themed';
konst MyComponent = () => {
konst { tema } = useTheme();
vrnitev (
<Pogled style={styles.container}>
<Naslov gumba="useTheme" style={{ barva: theme.colors.primary }}/>
</View>
 );
};

The makeStyles() generator kavljev je podoben uporabi slogovnega lista za definiranje slogov. Tako kot slogovni list ločuje vse sloge od zunaj vaše upodobljene komponente. Sklicevanje na tema predmet znotraj elementa sloga komponent.

Razširitev tem s TypeScriptom

RNE podpira deklaracije TypeScript v vaši aplikaciji, kar razvijalcem omogoča, da izkoristijo prednosti prednosti uporabe jezika TypeScript.

S TypeScripts združevanje deklaracij, lahko razširite definicije tem, da dodate barve in rekvizite po meri tako za privzete kot za komponente po meri RNE.

Če želite razširiti barve znotraj predmeta teme, boste ustvarili ločeno TypeScript.ts datoteko in deklarirajte modul @rneui/tematsko znotraj datoteke.

Nato lahko dodate barve po meri in določite njihovo pričakovano vrsto:

// **TypeScript.ts**
uvoz '@rneui/themed';
izjaviti modul '@rneui/themed' {
 izvoz vmesnikBarve{
 primarna luč: niz;
 secondaryLight: niz; 
 }
}

S tem modulom lahko svoje barve po meri posredujete kot vrednosti pri ustvarjanju teme:

konst tema = createTheme({
 barve: {
 primarna luč: "",
	secondaryLight: ""
 },
})

Zdaj so barve po meri del vašega predmeta teme in do njih lahko dostopate z ThemeProvider, ThemeConsumer, ali useTheme() kavelj.

Komponente RNE vs. Izvorne komponente React

Knjižnice komponent, kot je React Native Elements, so odličen način za hitro vzpostavitev in delovanje aplikacije. Osredotočajo se na strukturo aplikacije in ne na podrobnosti zasnove. Pri uporabi komponent RNE namesto komponent React Native je treba upoštevati predvsem fokus vaše aplikacije in čas za razvoj, ki ga imate.