Knihovny komponent jsou sbírkou přizpůsobitelného a opakovaně použitelného kódu, který lze vytvořit tak, aby vyhovoval vzoru návrhu konkrétní aplikace. Pomáhají udržovat konzistentní design napříč platformami a urychlují proces vývoje.
Zde se dozvíte, jak používat knihovnu komponent React Native Elements při vytváření vaší další aplikace React Native.
Co je React Native Elements?
React Native Elements (RNE) je open-source úsilí vývojářů React Native vytvořit knihovnu komponent, která může být užitečná při vytváření Android, iOS a webových aplikací. Na rozdíl od mnoha další knihovny komponent React Native, RNE podporuje syntaxi TypeScript.
Knihovna se skládá z více než 30 komponent, které se zaměřují na strukturu komponent.
Instalace prvků Reactive Native pomocí rozhraní React Native CLI
Následující pokyny slouží k instalaci React Native Elements do projektu vytvořeného pomocí cli React Native.
Nainstalujte React Native Elements do své holé aplikace React Native spuštěním:
instalace npm @rneui/themed @rneui/base
Měli byste také nainstalovat ikony reagujících nativních vektorů a kontext bezpečné oblasti:
npm Nainstalujte reagovat-rodák-vektorové ikony reagují-rodák-bezpečný-plocha-kontext
Jak nainstalovat React Native Elements v projektu Expo
Chcete-li nainstalovat React Native Elements do existujícího Expo projekt, nainstalujte balíček a reagujte-native-safe-area-context:
přidat přízi @rneui/themed @rneui/základní reakce-rodák-safe-area-context
Při instalaci balíčků udržujte jednoho správce balíčků, jako je npm nebo yarn, abyste se vyhnuli riziku kolize závislostí.
Projekty vytvořené pomocí expo cli mají ve výchozím nastavení nainstalované ikony reaktivních vektorů, takže je nemusíte instalovat.
Styling Single React Native Elements Components
Všechny komponenty dostupné prostřednictvím RNE používají různé rekvizity pro styling komponenty a kontejneru komponenty.
Kontejner komponenty je základní tag obalující kolem tagu komponenty, např. The tag je neporazitelný kolem komponenty a bere a containerStyle prop použít styly zobrazení.
Komponenta může obdržet výchozí stylingové rekvizity jako barva, typ, a velikost. Komponenta může také obdržet jedinečný uživatelský styl pro zpracování stylů komponenty.
Toto jsou všechny externí styly komponenty.
Například styling Knoflík komponent:
import { Pohled } z "reagovat-nativní";
import { Knoflík } z "@rneui/themed";
konst MyComponent = () => {
vrátit se (
<Pohled>
<Knoflík
buttonStyle={{ backgroundColor: "Šedá" }}
containerStyle={{ šířka: 150 }}
>
Pevné tlačítko
</Button>
<Knoflík
typ="obrys"
containerStyle={{ šířka: 150, okraj: 10 }}
titul="Tlačítko Obrys"
/>
</View>
);
}
Výše uvedený kód ukazuje, jak můžete použít styly na komponentu Button. Jedno tlačítko používá výchozí nastavení typ rekvizita a druhá používá obyč styl tlačítka podpěra. Obě tlačítka také používají containerStyle prop přidat styly zobrazení.
Vytváření motivů pro komponenty React Native Elements
Vytváření motivů pro komponenty RNE je užitečné, když chcete použít styl na každou instanci těchto komponent. Díky tématům se přizpůsobení komponentů tak, aby vyhovovaly požadovanému vzoru návrhu, stává snadným úkolem.
RNE poskytuje a createTheme() funkce ke stylovým komponentám. Tato funkce bude obsahovat styly motivů, které přepíší interní nebo výchozí styly každé komponenty.
Chcete-li vytvořit motiv, zavolejte createTheme() a předejte požadované styly motivů jako argument funkce:
import { ThemeProvider, createTheme } z '@rneui/themed';
konst theme = createTheme({
komponenty: {
Knoflík: {
containerStyle: {
okraj: 10,
},
titleStyle: {
barva: "Černá",
},
},
},
});
The ThemeProvider použije styly na jakoukoli komponentu zabalenou uvnitř.
Poskytovatel přijímá a téma rekvizita, která je nastavena na téma vytvořené výše:
<ThemeProvider theme={theme}>
<Název tlačítka="Tématické tlačítko" />
</ThemeProvider>
<Název tlačítka="Normální tlačítko" />
Styly motivu přepíší vnitřní nebo výchozí styly komponent, ale nepřepíší styl externí komponenty.
Pořadí priority RNE umisťuje externí styly na vrchol hierarchie.
Příklad:
// Téma
konst theme = createTheme({
komponenty: {
Knoflík: {
containerStyle: {
okraj: 10,
barva pozadí: "Červené",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Název tlačítka="Tématické tlačítko" barva={"sekundární"}/>
</ThemeProvider>
Ve výše uvedeném kódu je barva pozadí Knoflík složka bude sekundární, což je zelená barva na rozdíl od stylu tématu červené.
A téma objekt je dodáván s RNE, který poskytuje četné výchozí hodnoty barev po vybalení. RNE poskytuje různé možnosti, jako např Téma Spotřebitel komponent, useTheme() háček a makeStyles() hákový generátor pro přístup k téma objekt.
The Téma Spotřebitel komponenta zabalí vaše komponenty vykreslené anonymní funkcí. Tato anonymní funkce zabírá téma jako rekvizita.
K hodnotám motivu můžete přistupovat pomocí a styl podpěra:
import Reagovat z 'reagovat';
import { Knoflík } z 'react-native';
import { ThemeConsumer } z '@rneui/themed';
konst Moje Komponenta = () => (
<Téma Spotřebitel>
{({ téma }) => (
<Název tlačítka="Téma Spotřebitel" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Případně můžete použít useTheme() háček pro přístup k tématu uvnitř komponenty.
Například:
import Reagovat z 'reagovat';
import { Knoflík } z 'react-native';
import { useTheme } z '@rneui/themed';konst MyComponent = () => {
konst { téma } = useTheme();
vrátit se (
<Zobrazit styl={styles.container}>
<Název tlačítka="použít téma" style={{ color: theme.colors.primary }}/>
</View>
);
};
The makeStyles() generátor háčků je podobný použití šablony stylů k definování stylů. Stejně jako šablona stylů odděluje jakýkoli styl mimo vaši vykreslenou komponentu. Odkazování na téma objekt uvnitř rekvizity stylu komponent.
Rozšíření motivů pomocí TypeScript
RNE podporuje deklarace TypeScript ve vaší aplikaci, což umožňuje vývojářům využít výhod výhody používání jazyka TypeScript.
S TypeScripts deklarační sloučení, můžete rozšířit definice motivů a přidat vlastní barvy a rekvizity pro výchozí i vlastní komponenty RNE.
Chcete-li rozšířit barvy uvnitř objektu motivu, vytvoříte samostatný TypeScript.ts soubor a deklarujte modul @rneui/themed uvnitř souboru.
Poté můžete přidat své vlastní barvy a určit jejich očekávaný typ:
// **TypeScript.ts**import '@rneui/themed';
prohlásit modul '@rneui/themed' {
vývozní rozhraníBarvy{
primární světlo: řetězec;
sekundární Světlo: řetězec;
}
}
Pomocí tohoto modulu můžete při vytváření motivu předat své vlastní barvy jako hodnoty:
konst theme = createTheme({
barvy: {
primární světlo: "",
sekundární světlo: ""
},
})
Nyní jsou vlastní barvy součástí vašeho objektu motivu a lze k nim přistupovat pomocí ThemeProvider, ThemeConsumer, nebo useTheme() háček.
RNE Components vs. React Native Components
Knihovny komponent, jako je React Native Elements, jsou skvělým způsobem, jak rychle spustit aplikaci. Zaměřují se spíše na strukturu aplikace než na detaily designu. Používání komponent RNE přes komponenty React Native by se mělo řídit především zaměřením vaší aplikace a tím, kolik času na vývoj máte.