Komponentu bibliotēkas ir pielāgojama un atkārtoti lietojama koda kolekcija, ko var pielāgot konkrētas lietotnes dizaina modelim. Tie palīdz uzturēt konsekventu dizainu visās platformās un paātrina izstrādes procesu.
Šeit jūs uzzināsit, kā izmantot React Native Elements komponentu bibliotēku, veidojot savu nākamo React Native lietotni.
Kas ir React Native Elements?
React Native Elements (RNE) ir React Native izstrādātāju atklātā pirmkoda darbs, lai izveidotu komponentu bibliotēku, kas var būt noderīga Android, iOS un tīmekļa lietotņu veidošanā. Atšķirībā no daudziem citas React Native komponentu bibliotēkas, RNE atbalsta TypeScript sintaksi.
Bibliotēka sastāv no vairāk nekā 30 komponentiem, kas koncentrējas uz komponentu struktūru.
Reaktīvo vietējo elementu instalēšana, izmantojot React Native CLI
Tālāk sniegtie norādījumi ir paredzēti, lai instalētu React Native Elements projektā, kas izveidots, izmantojot React Native cli.
Instalējiet React Native Elements savā React Native lietotnē, izpildot:
npm instalēšana @rneui/themed @rneui/base
Jums vajadzētu arī instalēt reaģējošās vietējās vektora ikonas un drošā apgabala kontekstu:
npm uzstādīt reaģēt -dzimtā- vektoru ikonas reaģē-dzimtā-droši-platība-kontekstā
Kā Expo projektā instalēt React vietējos elementus
Lai instalētu React Native Elements esošajā Expo projektu, instalējiet pakotni un reaģējiet-native-safe-area-context:
dziju pievienot @rneui/themed @rneui/bāzes reakcija-dzimtā-drošības zonas konteksts
Pakešu instalēšanas laikā saglabājiet vienu pakotņu pārvaldnieku, piemēram, npm vai yarn, lai izvairītos no atkarības sadursmju riska.
Projektos, kas izveidoti, izmantojot expo cli, pēc noklusējuma ir instalētas react-native-vector-icons, tāpēc jums tas nav jāinstalē.
Single React Native Elements komponentu veidošana
Visiem komponentiem, kas pieejami, izmantojot RNE, ir dažādi rekvizīti komponenta un komponenta konteinera veidošanai.
Komponenta konteiners ir pamata tagu aptīšana ap komponenta tagu, piemēram,. The tags ir neuzvarams ap komponentu un aizņem a konteinersStils rekvizīti, lai lietotu skata stilus.
Komponents var saņemt tādus noklusējuma stila elementus kā krāsa, veids, un Izmērs. Komponents var arī saņemt unikālu pielāgotu stila atbalstu, lai apstrādātu komponenta stilus.
Tie visi ir komponenta ārējie stili.
Piemēram, veidojot Poga komponents:
imports {Skatīt} no "reaģēt-native";
imports { Button } no "@rneui/themed";
konst MyComponent = () => {
atgriezties (
<Skatīt>
<Poga
buttonStyle={{ fona krāsa: "pelēks" }}
containerStyle={{platums: 150}}
>
Cietā poga
</Button>
<Poga
tips="kontūru"
containerStyle={{platums: 150, piemale: 10}}
virsraksts="Kontūras poga"
/>
</View>
);
}
Iepriekš minētais kods parāda, kā pogas komponentam var lietot stilus. Viena poga izmanto noklusējuma iestatījumu veids prop, bet otrs izmanto pielāgoto pogasStils prop. Abas pogas izmanto arī konteinersStils rekvizīti, lai pievienotu skata stilus.
Motīvu izveide React Native Elements komponentiem
Motīvu izveide RNE komponentiem ir noderīga, ja vēlaties piemērot stilu katram šo komponentu gadījumam. Izmantojot motīvus, komponentu pielāgošana vēlamajam dizaina modelim kļūst viegls uzdevums.
RNE nodrošina a izveidot motīvu() funkciju, lai veidotu komponentus. Šī funkcija saglabās motīvu stilus, kas ignorē katra komponenta iekšējos vai noklusējuma stilus.
Lai izveidotu motīvu, zvaniet izveidot motīvu() un nododiet vēlamos motīvu stilus kā funkcijas argumentu:
imports { ThemeProvider, createTheme } no '@rneui/themed';
konst tēma = izveidotTēma({
sastāvdaļas: {
Poga: {
konteinera stils: {
piemale: 10,
},
titleStyle: {
krāsa: "melns",
},
},
},
});
The ThemeProvider piemēros stilus jebkuram komponentam, kas ir iesaiņots tajā.
Pakalpojumu sniedzējs pieņem a tēma rekvizīts, kas iestatīts iepriekš izveidotajam motīvam:
<ThemeProvider theme={theme}>
<Pogas nosaukums="Tematiskā poga" />
</ThemeProvider>
<Pogas nosaukums="Parasta poga" />
Motīvu stili ignorē iekšējos vai noklusējuma komponentu stilus, bet neaizstās ārējo komponentu stilu.
RNE prioritātes secība novieto ārējos stilus hierarhijas augšgalā.
Piemērs:
// Tēma
konst tēma = izveidotTēma({
sastāvdaļas: {
Poga: {
konteinera stils: {
piemale: 10,
fona krāsa: "sarkans",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Pogas nosaukums="Tematiskā poga" krāsa={"sekundārais"}/>
</ThemeProvider>
Iepriekš minētajā kodā fona krāsa Poga komponents būs sekundārs, kas ir zaļa krāsa pretstatā sarkanās tēmas stilam.
A tēma objekts tiek piegādāts kopā ar RNE, nodrošinot daudzas noklusējuma krāsu vērtības. RNE piedāvā dažādas iespējas, piemēram, Tēma Patērētājs komponents, useTheme() āķis, un makeStyles() āķa ģenerators, lai piekļūtu tēma objektu.
The Tēma Patērētājs komponents iesaiņos jūsu komponentus, kas atveidoti ar anonīmu funkciju. Šī anonīma funkcija aizņem tēma kā butaforija.
Motīvu vērtībām var piekļūt, izmantojot a stils rekvizīts:
imports Reaģēt no "reaģēt";
imports { Button } no 'reaģēt-native';
imports { ThemeConsumer } no '@rneui/themed';
konst MyComponent = () => (
<Tēma Patērētājs>
{({ tēma }) => (
<Pogas nosaukums="Tēma Patērētājs" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternatīvi varat izmantot useTheme() āķis, lai piekļūtu motīvam komponentā.
Piemēram:
imports Reaģēt no "reaģēt";
imports { Button } no 'reaģēt-native';
imports { useTheme } no '@rneui/themed';konst MyComponent = () => {
konst { tēma } = useTheme();
atgriezties (
<Skatīt style={styles.container}>
<Pogas nosaukums="useTheme" style={{ color: theme.colors.primary }}/>
</View>
);
};
The makeStyles() āķa ģenerators ir līdzīgs stila lapas izmantošanai stilu definēšanai. Tāpat kā stila lapa, tā atdala jebkuru stilu no jūsu renderētā komponenta ārpuses. Atsaucoties uz tēma objekts komponentu stila rekvizīta iekšpusē.
Motīvu paplašināšana, izmantojot TypeScript
RNE atbalsta TypeScript deklarācijas jūsu lietotnē, ļaujot izstrādātājiem izmantot priekšrocības TypeScript valodas lietošanas priekšrocības.
Ar TypeScripts deklarāciju apvienošana, varat paplašināt motīvu definīcijas, lai pievienotu pielāgotas krāsas un rekvizītus gan RNE noklusējuma, gan pielāgotajiem komponentiem.
Lai paplašinātu krāsas motīva objektā, izveidosit atsevišķu TypeScript.ts failu un deklarēt moduli @rneui/themed faila iekšpusē.
Pēc tam varat pievienot savas pielāgotās krāsas un norādīt to paredzamo veidu.
// **TypeScript.ts**imports '@rneui/themed';
paziņot modulis '@rneui/themed' {
eksportēt saskarneKrāsas{
primārāGaisma: virkne;
sekundārāGaisma: virkne;
}
}
Izmantojot šo moduli, varat nodot pielāgotās krāsas kā vērtības, veidojot motīvu.
konst tēma = izveidotTēma({
krāsas: {
primārā gaisma: "",
sekundārā gaisma: ""
},
})
Tagad pielāgotās krāsas ir daļa no jūsu motīva objekta, un tām var piekļūt, izmantojot ThemeProvider, ThemeConsumer, vai useTheme() āķis.
RNE komponenti vs. Reaģējiet uz vietējiem komponentiem
Komponentu bibliotēkas, piemēram, React Native Elements, ir lielisks veids, kā ātri iestatīt un palaist lietotni. Viņi koncentrējas uz lietotnes struktūru, nevis uz dizaina detaļām. Izmantojot RNE komponentus, nevis React Native komponentus, galvenokārt jāvadās pēc jūsu lietojumprogrammas fokusa un izstrādes laika.