Componentbibliotheken zijn een verzameling aanpasbare en herbruikbare code die kan worden aangepast aan het ontwerppatroon van een specifieke app. Ze helpen een consistent ontwerp op alle platforms te behouden en het ontwikkelingsproces te versnellen.
Hier leer je hoe je de React Native Elements-componentenbibliotheek gebruikt bij het bouwen van je volgende React Native-app.
Wat is React Native Elements?
React Native Elements (RNE) is een open-source-inspanning van React Native-ontwikkelaars om een componentenbibliotheek te maken die handig kan zijn bij het bouwen van Android-, iOS- en web-apps. In tegenstelling tot velen andere React Native-componentbibliotheken, RNE ondersteunt TypeScript-syntaxis.
De bibliotheek bestaat uit meer dan 30 componenten die zich richten op de componentstructuur.
Reactieve native elementen installeren met de React Native CLI
De volgende instructies zijn om React Native Elements te installeren in een project dat is gemaakt met de React Native cli.
Installeer React Native Elements in uw kale React Native-app door het volgende uit te voeren:
npm installeren @rneus/themed @rneus/base
Je moet ook react-native-vector-icons en safe-area-context installeren:
npm installeren Reageer-oorspronkelijk-vector-iconen reageren-oorspronkelijk-veilig-gebied-context
Hoe React Native Elements in een Expo-project te installeren
Om React Native Elements te installeren in een bestaand Expo project, installeer het pakket en react-native-safe-area-context:
garen toevoegen @rneus/themed @rneus/base reactie-oorspronkelijk-veilige-gebied-context
Onderhoud één pakketbeheerder zoals npm of garen tijdens het installeren van pakketten om het risico van afhankelijkheidsconflicten te omzeilen.
Projecten die zijn gebouwd met behulp van de expo cli hebben standaard react-native-vector-icons geïnstalleerd, dus u hoeft het niet te installeren.
Styling van Single React Native Elements-componenten
Alle componenten die via RNE verkrijgbaar zijn, nemen verschillende attributen mee voor het stylen van het component en de container van het component.
De container van het onderdeel is een basis tag die zich rond een componenttag wikkelt, zoals de. De tag is onoverwinnelijk rond het onderdeel en neemt een containerStijl prop om weergavestijlen toe te passen.
Een component kan standaard stylingprops krijgen zoals kleur, type, En maat. Een component kan ook een unieke aangepaste stijl krijgen om de stijlen van de component aan te kunnen.
Dit zijn allemaal externe stijlen voor de component.
Bijvoorbeeld het stylen van de Knop onderdeel:
importeren { Weergave } van "reageer native";
importeren { Knop } van "@rneui/thema";
const MijnComponent = () => {
opbrengst (
<Weergave>
<Knop
buttonStyle={{ achtergrondkleur: "grijs" }}
containerStyle={{ breedte: 150 }}
>
Solide knop
</Button>
<Knop
type="overzicht"
containerStyle={{ breedte: 150, marge: 10 }}
titel="Overzichtsknop"
/>
</View>
);
}
De bovenstaande code laat zien hoe u stijlen kunt toepassen op een knopcomponent. One Button gebruikt een standaard type prop, en de andere gebruikt de custom knopStijl prop. Beide knoppen gebruiken ook de containerStijl prop om weergavestijlen toe te voegen.
Thema's maken voor React Native Elements-componenten
Het maken van thema's voor RNE-componenten is handig wanneer u een stijl wilt toepassen op elk exemplaar van die componenten. Met thema's wordt het aanpassen van uw componenten aan het gewenste ontwerppatroon een gemakkelijke taak.
RNE biedt een createThema() functie om componenten te stylen. Deze functie bevat themastijlen die de interne of standaardstijlen van elk onderdeel overschrijven.
Bel om een thema te maken createThema() en geef de gewenste themastijlen door als functieargument:
importeren { ThemeProvider, createTheme } van '@rneui/thema';
const thema = createTheme({
componenten: {
Knop: {
containerstijl: {
marge: 10,
},
titelStijl: {
kleur: "zwart",
},
},
},
});
De ThemeProvider zal stijlen toepassen op elk onderdeel dat erin is verpakt.
De aanbieder accepteert een thema prop die is ingesteld op het hierboven gemaakte thema:
<ThemeProvider-thema={theme}>
<Knop titel="Thema knop" />
</ThemeProvider>
<Knop titel="Normale knop" />
Themastijlen overschrijven interne of standaard componentstijlen, maar overschrijven een externe componentstijl niet.
De rangorde van RNE plaatst externe stijlen bovenaan de hiërarchie.
Voorbeeld:
// Thema
const thema = createTheme({
componenten: {
Knop: {
containerstijl: {
marge: 10,
Achtergrond kleur: "rood",
},
},
},
});
//Component
<ThemeProvider-thema={theme}>
<Knop titel="Thema knop" kleur={"ondergeschikt"}/>
</ThemeProvider>
In de bovenstaande code is de achtergrondkleur van het Knop component zal secundair zijn, wat een groene kleur is in tegenstelling tot de themastijl van rood.
A thema object wordt geleverd met RNE en biedt direct uit de doos tal van standaard kleurwaarden. RNE biedt verschillende opties zoals de ThemaConsument bestanddeel, gebruikThema() haak, en makeStyles() haakgenerator om toegang te krijgen tot de thema voorwerp.
De ThemaConsument component verpakt uw componenten weergegeven met een anonieme functie. Deze anonieme functie duurt thema als prop.
Je hebt toegang tot de themawaarden met a stijl steun:
importeren Reageer van 'Reageer';
importeren { Knop } van 'react-native';
importeren { ThemaConsument } van '@rneui/thema';
const MijnComponent = () => (
<ThemaConsument>
{({ thema }) => (
<Knop titel="ThemaConsument" style={{ kleur: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Als alternatief kunt u de gebruikThema() hook om toegang te krijgen tot het thema binnen een component.
Bijvoorbeeld:
importeren Reageer van 'Reageer';
importeren { Knop } van 'react-native';
importeren { gebruik Thema } van '@rneui/thema';const MijnComponent = () => {
const { thema } = useTheme();
opbrengst (
<Bekijk style={styles.container}>
<Knop titel="gebruik Thema" style={{ kleur: theme.colors.primary }}/>
</View>
);
};
De makeStyles() hook generator is vergelijkbaar met het gebruik van een stijlblad om stijlen te definiëren. Net als het stijlblad scheidt het elke styling van buiten uw gerenderde component. Verwijzend naar de thema object in een prop in componentenstijl.
Thema's uitbreiden met TypeScript
RNE ondersteunt TypeScript-declaraties in uw app, zodat ontwikkelaars hiervan kunnen profiteren de voordelen van het gebruik van TypeScript-taal.
Met TypeScripts aangifte samenvoegen, kunt u themadefinities uitbreiden om aangepaste kleuren en rekwisieten toe te voegen voor zowel de standaard- als aangepaste componenten van RNE.
Om de kleuren binnen het thema-object uit te breiden, maakt u een apart TypeScript.ts bestand en declareer de module @rneui/thema binnen het dossier.
U kunt dan doorgaan met het toevoegen van uw aangepaste kleuren en het verwachte type specificeren:
// **TypeScript.ts**importeren '@rneus/themed';
verklaren moduul '@rneus/thema' {
exporteren koppelKleuren{
primairLicht: tekenreeks;
secundairLicht: tekenreeks;
}
}
Met deze module kunt u uw aangepaste kleuren als waarden doorgeven bij het maken van een thema:
const thema = createTheme({
kleuren: {
primairlicht: "",
secundair licht: ""
},
})
De aangepaste kleuren maken nu deel uit van uw thema-object en zijn toegankelijk via ThemeProvider, ThemeConsumer, of de gebruikThema() haak.
RNE-componenten vs. Reageer op inheemse componenten
Componentbibliotheken zoals React Native Elements zijn een geweldige manier om een app snel aan de praat te krijgen. Ze houden uw focus op de structuur van de app in plaats van op de details van het ontwerp. Het gebruik van RNE-componenten in plaats van React Native-componenten moet in de eerste plaats worden geleid door de focus van uw applicatie en hoeveel ontwikkeltijd u heeft.
