Komponentbiblioteker er en samling af tilpasselig og genbrugelig kode, der kan laves, så den passer til en specifik apps designmønster. De hjælper med at opretholde ensartet design på tværs af platforme og fremskynde udviklingsprocessen.
Her lærer du, hvordan du bruger React Native Elements-komponentbiblioteket, når du bygger din næste React Native-app.
Hvad er React Native Elements?
React Native Elements (RNE) er en open source-indsats fra React Native-udviklere til at skabe et komponentbibliotek, der kan være nyttigt, når man bygger Android, iOS og webapps. I modsætning til mange andre React Native-komponentbiblioteker, RNE understøtter TypeScript-syntaks.
Biblioteket består af over 30 komponenter, der fokuserer på komponentstruktur.
Installation af Reactive Native Elements med React Native CLI
Følgende instruktioner er at installere React Native Elements i et projekt oprettet ved hjælp af React Native cli.
Installer React Native Elements i din bare React Native-app ved at køre:
npm installere @rneui/themed @rneui/base
Du bør også installere react-native-vector-ikoner og safe-area-context:
npm installere reagere-hjemmehørende-vektor-ikoner reagerer-hjemmehørende-sikker-areal-sammenhæng
Sådan installeres React Native Elements i et Expo-projekt
For at installere React Native Elements i en eksisterende Expo projekt, installer pakken og react-native-safe-area-context:
garn tilføje @rneui/themed @rneui/base reagere-hjemmehørende-sikkert-område-kontekst
Vedligehold en pakkehåndtering som npm eller yarn, mens du installerer pakker for at undgå risikoen for afhængighedssammenstød.
Projekter bygget ved hjælp af expo cli har react-native-vector-ikoner installeret som standard, så du behøver ikke at installere det.
Styling Single React Native Elements-komponenter
Alle komponenter, der er tilgængelige gennem RNE, har forskellige rekvisitter til styling af komponenten og beholderen til komponenten.
Komponentens beholder er en grundlæggende tag, der vikles rundt om et komponenttag, som f.eks. Det tag er uovervindelig omkring komponenten og tager en containerstil prop for at anvende visningsstile.
En komponent kan modtage standard styling rekvisitter som farve, type, og størrelse. En komponent kan også modtage en unik tilpasset stilrekvisit til at håndtere komponentens stilarter.
Disse er alle eksterne stilarter for komponenten.
For eksempel styling af Knap komponent:
importere { Se } fra "reager-native";
importere { Knap } fra "@rneui/tema";
konst MyComponent = () => {
Vend tilbage (
<Udsigt>
<Knap
buttonStyle={{ baggrundsfarve: "grå" }}
containerStyle={{ width: 150 }}
>
Solid knap
</Button>
<Knap
type="omrids"
containerStyle={{ width: 150, margin: 10 }}
titel="Kontur knap"
/>
</View>
);
}
Koden ovenfor viser, hvordan du kan anvende stilarter på en knapkomponent. One Button bruger en standard type prop, og den anden bruger skikken knapstil rekvisit. Begge knapper bruger også containerstil prop for at tilføje visningsstile.
Oprettelse af temaer til React Native Elements-komponenter
Oprettelse af temaer til RNE-komponenter er nyttigt, når du vil anvende en stil på hver forekomst af disse komponenter. Med temaer bliver det en let opgave at tilpasse dine komponenter, så de passer til det ønskede designmønster.
RNE giver en createTheme() funktion til at style komponenter. Denne funktion vil holde temastile, der tilsidesætter hver komponents interne eller standardstile.
Ring for at oprette et tema createTheme() og send de ønskede temastile som et funktionsargument:
importere { ThemeProvider, createTheme } fra '@rneui/tema';
konst theme = createTheme({
komponenter: {
Knap: {
containerstil: {
margin: 10,
},
titelstil: {
farve: "sort",
},
},
},
});
Det ThemeProvider vil anvende stilarter på enhver komponent, der er pakket ind i den.
Udbyderen accepterer en tema prop, der er indstillet til temaet oprettet ovenfor:
<ThemeProvider theme={theme}>
<Knap titel ="Tema knap" />
</ThemeProvider>
<Knap titel ="Normal knap" />
Tematypografier tilsidesætter interne eller standardkomponenttypografier, men vil ikke tilsidesætte en ekstern komponenttypografi.
RNE's rækkefølge placerer eksterne stilarter øverst i hierarkiet.
Eksempel:
// Tema
konst theme = createTheme({
komponenter: {
Knap: {
containerstil: {
margin: 10,
baggrundsfarve: "rød",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Knap titel ="Tema knap" farve={"sekundær"}/>
</ThemeProvider>
I ovenstående kode er baggrundsfarven for Knap komponent vil være sekundær, hvilket er en grøn farve i modsætning til temastilen rød.
EN tema objektet leveres med RNE, hvilket giver adskillige standardfarveværdier ud af kassen. RNE giver forskellige muligheder som TemaForbruger komponent, useTheme() krog, og makeStyles() kroggenerator for at få adgang til tema objekt.
Det TemaForbruger komponent vil pakke dine komponenter gengivet med en anonym funktion. Denne anonyme funktion tager tema som rekvisit.
Du kan få adgang til temaværdierne med en stil rekvisit:
importere Reagere fra 'reagere';
importere { Knap } fra 'reager-native';
importere { ThemeConsumer } fra '@rneui/tema';
konst MyComponent = () => (
<TemaForbruger>
{({ tema }) => (
<Knap titel ="TemaForbruger" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativt kan du bruge useTheme() krog for at få adgang til temaet inde i en komponent.
For eksempel:
importere Reagere fra 'reagere';
importere { Knap } fra 'reager-native';
importere { useTheme } fra '@rneui/tema';konst MyComponent = () => {
konst { tema } = useTheme();
Vend tilbage (
<Se style={styles.container}>
<Knap titel ="brug Theme" style={{ color: theme.colors.primary }}/>
</View>
);
};
Det makeStyles() hook generator svarer til at bruge et typografiark til at definere stilarter. Ligesom typografiarket adskiller det enhver styling fra uden for din gengivne komponent. Med henvisning til tema objekt inde i en komponentstilprop.
Udvidelse af temaer med TypeScript
RNE understøtter TypeScript-deklarationer i din app, hvilket giver udviklere mulighed for at drage fordel af fordelene ved at bruge TypeScript-sprog.
Med TypeScripts erklæringssammenlægning, kan du udvide temadefinitioner for at tilføje brugerdefinerede farver og rekvisitter til både RNEs standard- og brugerdefinerede komponenter.
For at udvide farverne inde i temaobjektet skal du oprette en separat TypeScript.ts fil og deklarer modulet @rneui/tema inde i filen.
Du kan derefter gå videre med at tilføje dine brugerdefinerede farver og angive deres forventede type:
// **TypeScript.ts**importere '@rneui/themed';
erklære modul '@rneui/tema' {
eksport interfaceFarver{
primærlys: streng;
sekundærLys: streng;
}
}
Med dette modul kan du angive dine brugerdefinerede farver som værdier, når du opretter et tema:
konst theme = createTheme({
farver: {
primærlys: "",
sekundært lys: ""
},
})
Nu er de brugerdefinerede farver en del af dit temaobjekt og kan tilgås vha ThemeProvider, ThemeConsumer, eller den useTheme() krog.
RNE-komponenter vs. Reager native komponenter
Komponentbiblioteker som React Native Elements er en fantastisk måde at få en app op at køre hurtigt. De holder dit fokus på appens struktur frem for på detaljerne i designet. Brug af RNE-komponenter over React Native-komponenter bør primært styres af fokus på din applikation og hvor meget udviklingstid du har.