Knižnice komponentov sú kolekciou prispôsobiteľného a opakovane použiteľného kódu, ktorý je možné prispôsobiť vzoru dizajnu konkrétnej aplikácie. Pomáhajú udržiavať konzistentný dizajn naprieč platformami a urýchľujú proces vývoja.
Tu sa dozviete, ako používať knižnicu komponentov React Native Elements pri vytváraní vašej ďalšej aplikácie React Native.
Čo je to React Native Elements?
React Native Elements (RNE) je open source snaha vývojárov React Native vytvoriť knižnicu komponentov, ktorá môže byť užitočná pri vytváraní aplikácií pre Android, iOS a webových aplikácií. Na rozdiel od mnohých ďalšie knižnice komponentov React Native, RNE podporuje syntax TypeScript.
Knižnica pozostáva z viac ako 30 komponentov, ktoré sa zameriavajú na štruktúru komponentov.
Inštalácia Reactive Native Elements s React Native CLI
Nasledujúce pokyny slúžia na inštaláciu React Native Elements v projekte vytvorenom pomocou React Native cli.
Nainštalujte React Native Elements do svojej holej aplikácie React Native spustením:
inštalácia npm @rneui/themed @rneui/base
Mali by ste tiež nainštalovať ikony reaktívnych natívnych vektorov a kontext bezpečnej oblasti:
npm Inštalácia reagovať-natívny-reagujú vektorové ikony-natívny-bezpečné-oblasť-kontext
Ako nainštalovať React Native Elements v projekte Expo
Ak chcete nainštalovať React Native Elements do existujúceho Expo projekt, nainštalujte balík a reagujte-native-safe-area-context:
pridať priadzu @rneui/themed @rneui/základná reakcia-natívny-safe-area-context
Počas inštalácie balíkov udržujte jedného správcu balíkov, ako je npm alebo yarn, aby ste sa vyhli riziku konfliktov závislostí.
Projekty vytvorené pomocou expo cli majú predvolene nainštalované ikony reaktívnych vektorov, takže ich nemusíte inštalovať.
Styling Single React Native Elements Components
Všetky komponenty dostupné cez RNE majú rôzne rekvizity na styling komponentu a kontajnera komponentu.
Nádoba komponentu je základ tag obalí okolo tagu komponentu, napr. The tag je neporaziteľný okolo komponentu a zaberá a containerStyle prop použiť štýly zobrazenia.
Komponent môže získať predvolené štýlové rekvizity, napr farba, typu, a veľkosť. Komponent môže tiež získať jedinečnú podperu vlastného štýlu na spracovanie štýlov komponentu.
Toto všetko sú externé štýly pre komponent.
Napríklad styling Tlačidlo komponent:
importovať { Vyhliadka } od "reagovať-natívne";
importovať { Tlačidlo } od "@rneui/themed";
konšt MyComponent = () => {
vrátiť (
<vyhliadka>
<Tlačidlo
buttonStyle={{ backgroundColor: "sivá" }}
containerStyle={{ šírka: 150 }}
>
Pevné tlačidlo
</Button>
<Tlačidlo
typ="obrys"
containerStyle={{ šírka: 150, okraj: 10 }}
titul="Tlačidlo Obrys"
/>
</View>
);
}
Vyššie uvedený kód ukazuje, ako môžete použiť štýly na komponent Button. One Button používa predvolené nastavenie typu rekvizita a druhá používa obyčaj buttonStyle rekvizita. Obe tlačidlá tiež používajú containerStyle rekvizita na pridanie štýlov zobrazenia.
Vytváranie tém pre komponenty React Native Elements
Vytváranie tém pre komponenty RNE je užitočné, keď chcete použiť štýl na každú inštanciu týchto komponentov. Vďaka témam sa prispôsobenie komponentov tak, aby vyhovovali požadovanému vzoru dizajnu, stáva jednoduchou úlohou.
RNE poskytuje a createTheme() funkcie na štýlové komponenty. Táto funkcia bude uchovávať štýly tém, ktoré prepíšu interné alebo predvolené štýly každého komponentu.
Ak chcete vytvoriť tému, zavolajte createTheme() a odovzdajte požadované štýly tém ako argument funkcie:
importovať { ThemeProvider, createTheme } od '@rneui/themed';
konšt téma = vytvoriť tému({
komponenty: {
Tlačidlo: {
containerStyle: {
okraj: 10,
},
titleStyle: {
farba: "čierna",
},
},
},
});
The Poskytovateľ tém použije štýly na akýkoľvek komponent zabalený vo vnútri.
Poskytovateľ akceptuje a tému rekvizita, ktorá je nastavená na tému vytvorenú vyššie:
<ThemeProvider theme={theme}>
<Názov tlačidla="Tematické tlačidlo" />
</ThemeProvider>
<Názov tlačidla="Normálne tlačidlo" />
Štýly tém prepíšu interné alebo predvolené štýly komponentov, ale neprepíšu štýl externého komponentu.
Poradie priority RNE umiestňuje externé štýly na vrchol hierarchie.
Príklad:
// Téma
konšt téma = vytvoriť tému({
komponenty: {
Tlačidlo: {
containerStyle: {
okraj: 10,
farba pozadia: "červená",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Názov tlačidla="Tematické tlačidlo" farba={"sekundárne"}/>
</ThemeProvider>
Vo vyššie uvedenom kóde je farba pozadia Tlačidlo komponent bude sekundárny, čo je zelená farba na rozdiel od štýlu témy červená.
A tému objekt sa dodáva s RNE, čo poskytuje množstvo predvolených farebných hodnôt hneď po vybalení. RNE poskytuje rôzne možnosti, ako napr ThemeConsumer komponent, useTheme() háčik a makeStyles() hákový generátor na prístup k tému objekt.
The ThemeConsumer komponent zabalí vaše komponenty vykreslené anonymnou funkciou. Táto anonymná funkcia zaberá tému ako rekvizita.
K hodnotám témy môžete pristupovať pomocou a štýl podpera:
importovať Reagovať od 'reagovať';
importovať { Tlačidlo } od 'react-native';
importovať { ThemeConsumer } od '@rneui/themed';
konšt MyComponent = () => (
<ThemeConsumer>
{({ téma }) => (
<Názov tlačidla="ThemeConsumer" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Prípadne môžete použiť useTheme() háčik na prístup k téme vnútri komponentu.
Napríklad:
importovať Reagovať od 'reagovať';
importovať { Tlačidlo } od 'react-native';
importovať { useTheme } od '@rneui/themed';konšt MyComponent = () => {
konšt { téma } = useTéma();
vrátiť (
<Zobraziť štýl={styles.container}>
<Názov tlačidla="použite tému" style={{ color: theme.colors.primary }}/>
</View>
);
};
The makeStyles() generátor háku je podobný používaniu šablóny štýlov na definovanie štýlov. Podobne ako predloha štýlov oddeľuje akýkoľvek štýl od vonkajšieho priestoru vykresleného komponentu. Odkazovanie na tému objekt vo vnútri rekvizity v štýle komponentov.
Rozšírenie tém pomocou TypeScript
RNE podporuje deklarácie TypeScript vo vašej aplikácii, čo umožňuje vývojárom využiť ich výhody výhody používania jazyka TypeScript.
S TypeScriptmi deklaračné zlúčenie, môžete rozšíriť definície tém a pridať vlastné farby a rekvizity pre predvolené aj vlastné komponenty RNE.
Ak chcete rozšíriť farby vo vnútri objektu témy, vytvoríte samostatný TypeScript.ts súbor a deklarujte modul @rneui/themed vnútri súboru.
Potom môžete pridať svoje vlastné farby a určiť ich očakávaný typ:
// **TypeScript.ts**importovať '@rneui/themed';
vyhlásiť modul '@rneui/themed' {
export rozhranieFarby{
primárne svetlo: reťazec;
sekundárne svetlo: reťazec;
}
}
Pomocou tohto modulu môžete pri vytváraní motívu odovzdať svoje vlastné farby ako hodnoty:
konšt téma = vytvoriť tému({
farby: {
primárne svetlo: "",
sekundárne svetlo: ""
},
})
Teraz sú vlastné farby súčasťou vášho tematického objektu a môžete k nim pristupovať pomocou ThemeProvider, ThemeConsumer, alebo useTheme() háčik.
RNE Components vs. React Native Components
Knižnice komponentov ako React Native Elements sú skvelým spôsobom, ako rýchlo spustiť aplikáciu. Zamerajú sa skôr na štruktúru aplikácie než na detaily dizajnu. Používanie komponentov RNE cez komponenty React Native by sa malo riadiť predovšetkým zameraním vašej aplikácie a množstvom času na vývoj, ktorý máte.