Komponentbibliotek är en samling anpassningsbar och återanvändbar kod som kan göras för att passa en specifik apps designmönster. De hjälper till att upprätthålla konsekvent design över plattformar och påskyndar utvecklingsprocessen.
Här lär du dig hur du använder React Native Elements-komponentbiblioteket när du bygger din nästa React Native-app.
Vad är React Native Elements?
React Native Elements (RNE) är en öppen källkodssatsning av React Native-utvecklare för att skapa ett komponentbibliotek som kan vara användbart när man bygger Android, iOS och webbappar. Till skillnad från många andra React Native-komponentbibliotek, RNE stöder TypeScript-syntax.
Biblioteket består av över 30 komponenter som fokuserar på komponentstruktur.
Installera Reactive Native Elements med React Native CLI
Följande instruktioner är för att installera React Native Elements i ett projekt skapat med hjälp av React Native cli.
Installera React Native Elements i din nakna React Native-app genom att köra:
npm installera @rneui/themed @rneui/base
Du bör också installera react-native-vector-ikoner och safe-area-context:
npm Installera reagera-inföding-vektor-ikoner reagerar-inföding-säker-område-sammanhang
Hur man installerar React Native Elements i ett Expo-projekt
För att installera React Native Elements i en befintlig Expo projekt, installera paketet och react-native-safe-area-context:
garn lägga till @rneui/themed @rneui/basreagera-inföding-säkert-område-sammanhang
Behåll en pakethanterare som npm eller yarn medan du installerar paket för att undvika risken för beroendekrockar.
Projekt byggda med expo cli har react-native-vektor-ikoner installerade som standard, så du behöver inte installera det.
Styling Single React Native Elements-komponenter
Alla komponenter som är tillgängliga via RNE tar olika rekvisita för att styla komponenten och behållaren för komponenten.
Komponentens behållare är en grundläggande tagg som lindas runt en komponenttagg, som. De taggen är oövervinnerlig runt komponenten och tar en containerstil prop för att tillämpa vystilar.
En komponent kan ta emot standardstylingrekvisita som Färg, typ, och storlek. En komponent kan också få en unik anpassad stilrekvisita för att hantera komponentens stilar.
Dessa är alla externa stilar för komponenten.
Till exempel styling av Knapp komponent:
importera { Visa } från "reagera-native";
importera { Knapp } från "@rneui/tema";
konst MyComponent = () => {
lämna tillbaka (
<Se>
<Knapp
buttonStyle={{ bakgrundsfärg: "grå" }}
containerStyle={{ bredd: 150 }}
>
Fast knapp
</Button>
<Knapp
typ="skissera"
containerStyle={{ bredd: 150, marginal: 10 }}
titel="Konturknapp"
/>
</View>
);
}
Koden ovan visar hur du kan tillämpa stilar på en Button-komponent. One Button använder en standard typ prop, och den andra använder seden knappstil stötta. Båda knapparna använder också containerstil prop för att lägga till vystilar.
Skapa teman för React Native Elements-komponenter
Att skapa teman för RNE-komponenter är användbart när du vill tillämpa en stil på varje instans av dessa komponenter. Med teman blir det en lätt uppgift att anpassa dina komponenter för att passa det önskade designmönstret.
RNE tillhandahåller en createTheme() funktion för att styla komponenter. Den här funktionen kommer att hålla temastilar som åsidosätter varje komponents interna eller standardstilar.
För att skapa ett tema, ring createTheme() och skicka de önskade temastilarna som ett funktionsargument:
importera { ThemeProvider, createTheme } från '@rneui/tema';
konst theme = createTheme({
komponenter: {
Knapp: {
containerStyle: {
marginal: 10,
},
titleStyle: {
Färg: "svart",
},
},
},
});
De Temaleverantör kommer att tillämpa stilar på alla komponenter som är inlindade i den.
Leverantören accepterar en tema prop som är inställd på temat skapat ovan:
<ThemeProvider theme={theme}>
<Knappens titel="Tema knapp" />
</ThemeProvider>
<Knappens titel="Normal knapp" />
Temastilar åsidosätter interna eller standardkomponentstilar men åsidosätter inte en extern komponentstil.
RNE: s prioritetsordning placerar externa stilar högst upp i hierarkin.
Exempel:
// Tema
konst theme = createTheme({
komponenter: {
Knapp: {
containerStyle: {
marginal: 10,
bakgrundsfärg: "röd",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Knappens titel="Tema knapp" färg={"sekundär"}/>
</ThemeProvider>
I ovanstående kod visas bakgrundsfärgen för Knapp komponenten kommer att vara sekundär, vilket är en grön färg i motsats till temastilen rött.
A tema objektet levereras med RNE, vilket ger många standardfärgvärden direkt ur förpackningen. RNE tillhandahåller olika alternativ som TemaKonsument komponent, useTheme() krok, och makeStyles() krokgenerator för att komma åt tema objekt.
De TemaKonsument komponent kommer att omsluta dina komponenter renderade med en anonym funktion. Denna anonyma funktion tar tema som rekvisita.
Du kan komma åt temavärdena med en stil stötta:
importera Reagera från 'reagera';
importera { Knapp } från 'reagera-native';
importera { ThemeConsumer } från '@rneui/tema';
konst MyComponent = () => (
<TemaKonsument>
{({ tema }) => (
<Knappens titel="TemaKonsument" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativt kan du använda useTheme() krok för att komma åt temat inuti en komponent.
Till exempel:
importera Reagera från 'reagera';
importera { Knapp } från 'reagera-native';
importera { useTheme } från '@rneui/tema';konst MyComponent = () => {
konst { tema } = useTheme();
lämna tillbaka (
<Visa style={styles.container}>
<Knappens titel="användtema" style={{ color: theme.colors.primary }}/>
</View>
);
};
De makeStyles() krokgenerator liknar att använda en stilmall för att definiera stilar. Precis som stilmallen separerar den all styling från utsidan av din renderade komponent. Med hänvisning till tema objekt inuti en komponentstilprop.
Utöka teman med TypeScript
RNE stöder TypeScript-deklarationer i din app, vilket gör att utvecklare kan dra nytta av fördelarna med att använda TypeScript-språk.
Med TypeScripts deklaration sammanslagning, kan du utöka temadefinitionerna för att lägga till anpassade färger och rekvisita för både RNE: s standardkomponenter och anpassade komponenter.
För att utöka färgerna inuti temaobjektet skapar du en separat TypeScript.ts fil och deklarera modulen @rneui/tema inuti filen.
Du kan sedan gå vidare och lägga till dina anpassade färger och ange deras förväntade typ:
// **TypeScript.ts**importera '@rneui/themed';
deklarera modul '@rneui/tema' {
exportera gränssnittFärger{
primärLjus: sträng;
sekundärLjus: sträng;
}
}
Med den här modulen kan du skicka in dina anpassade färger som värden när du skapar ett tema:
konst theme = createTheme({
färger: {
primärljus: "",
sekundärt ljus: ""
},
})
Nu är de anpassade färgerna en del av ditt temaobjekt och kan nås med hjälp av ThemeProvider, ThemeConsumer, eller den useTheme() krok.
RNE-komponenter vs. Reagera inbyggda komponenter
Komponentbibliotek som React Native Elements är ett utmärkt sätt att få igång en app snabbt. De håller ditt fokus på appens struktur snarare än på detaljerna i designen. Att använda RNE-komponenter över React Native-komponenter bör styras främst av fokus på din applikation och hur mycket utvecklingstid du har.
