Komponentenbibliotheken sind eine Sammlung von anpassbarem und wiederverwendbarem Code, der an das Designmuster einer bestimmten App angepasst werden kann. Sie tragen dazu bei, ein konsistentes Design auf allen Plattformen aufrechtzuerhalten und den Entwicklungsprozess zu beschleunigen.
Hier erfahren Sie, wie Sie die React Native Elements-Komponentenbibliothek beim Erstellen Ihrer nächsten React Native-App verwenden.
Was ist React Native Elements?
React Native Elements (RNE) ist eine Open-Source-Bemühung von React Native-Entwicklern, eine Komponentenbibliothek zu erstellen, die beim Erstellen von Android-, iOS- und Web-Apps nützlich sein kann. Im Gegensatz zu vielen andere React Native-Komponentenbibliotheken, RNE unterstützt die TypeScript-Syntax.
Die Bibliothek besteht aus über 30 Komponenten, die sich auf die Komponentenstruktur konzentrieren.
Installieren von Reactive Native Elements mit der React Native CLI
Die folgenden Anweisungen beziehen sich auf die Installation von React Native Elements in einem Projekt, das mit der React Native CLI erstellt wurde.
Installieren Sie React Native Elements in Ihrer reinen React Native-App, indem Sie Folgendes ausführen:
npm installieren @rneui/themed @rneui/base
Sie sollten auch React-Native-Vector-Icons und Safe-Area-Context installieren:
npm Installieren reagieren-einheimisch-Vektor-Icons reagieren-einheimisch-sicher-Bereich-Kontext
So installieren Sie React Native Elements in einem Expo-Projekt
Um React Native Elements in eine bestehende zu installieren Messe Projekt, installieren Sie das Paket und reagieren-native-sicherer-Bereich-Kontext:
Garn hinzufügen @rneui/themed @rneui/Basisreaktion-einheimisch-sicherer-Bereich-Kontext
Pflegen Sie einen Paketmanager wie npm oder Garn, während Sie Pakete installieren, um das Risiko von Abhängigkeitskonflikten zu vermeiden.
Projekte, die mit dem Expo-Cli erstellt wurden, haben standardmäßig React-Native-Vector-Icons installiert, sodass Sie es nicht installieren müssen.
Styling von Single React Native Elements-Komponenten
Alle über RNE erhältlichen Komponenten nehmen verschiedene Requisiten zum Gestalten der Komponente und des Containers der Komponente.
Der Container der Komponente ist ein Basic -Tag um ein Komponenten-Tag gewickelt, wie z. Der Tag ist unbesiegbar um die Komponente herum und nimmt einen containerStyle prop zum Anwenden von Ansichtsstilen.
Eine Komponente kann Standard-Styling-Requisiten wie erhalten Farbe, Typ, Und Größe. Eine Komponente kann auch eine einzigartige benutzerdefinierte Stilstütze erhalten, um die Stile der Komponente zu handhaben.
Dies sind alles externe Stile für die Komponente.
Zum Beispiel das Styling Taste Komponente:
importieren { Sicht } aus "reaktionsnativ";
importieren { Taste } aus "@rneui/thematisiert";
konst MeineKomponente = () => {
zurückkehren (
<Sicht>
<Taste
buttonStyle={{ Hintergrundfarbe: "grau" }}
containerStyle={{ Breite: 150 }}
>
Fester Knopf
</Button>
<Taste
Typ="Umriss"
containerStyle={{ Breite: 150, Rand: 10 }}
Titel="Gliederungsschaltfläche"
/>
</View>
);
}
Der obige Code zeigt, wie Sie Stile auf eine Button-Komponente anwenden können. One Button verwendet einen Standard Typ prop, und der andere verwendet den Brauch buttonStyle Stütze. Beide Tasten verwenden auch die containerStyle prop zum Hinzufügen von Ansichtsstilen.
Erstellen von Designs für React Native Elements-Komponenten
Das Erstellen von Designs für RNE-Komponenten ist nützlich, wenn Sie einen Stil auf jede Instanz dieser Komponenten anwenden möchten. Mit Themen wird das Anpassen Ihrer Komponenten an das gewünschte Designmuster zu einer einfachen Aufgabe.
RNE bietet a createTheme() Funktion zum Stylen von Komponenten. Diese Funktion enthält Themenstile, die die internen oder Standardstile jeder Komponente überschreiben.
Um ein Thema zu erstellen, rufen Sie an createTheme() und übergeben Sie die gewünschten Themenstile als Funktionsargument:
importieren { ThemeProvider, createTheme } aus '@rneui/themed';
konst theme = createTheme({
Komponenten: {
Taste: {
containerStil: {
Rand: 10,
},
Titelstil: {
Farbe: "Schwarz",
},
},
},
});
Der ThemeProvider wendet Stile auf alle darin eingeschlossenen Komponenten an.
Der Anbieter akzeptiert a Thema Requisite, die auf das oben erstellte Thema eingestellt ist:
<ThemeProvider theme={theme}>
<Schaltflächentitel="Thematische Schaltfläche" />
</ThemeProvider>
<Schaltflächentitel="Normale Taste" />
Themenstile überschreiben interne oder standardmäßige Komponentenstile, setzen jedoch keinen externen Komponentenstil außer Kraft.
Die Rangfolge von RNE stellt externe Stile an die Spitze der Hierarchie.
Beispiel:
// Thema
konst theme = createTheme({
Komponenten: {
Taste: {
containerStil: {
Rand: 10,
Hintergrundfarbe: "Rot",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Schaltflächentitel="Thematische Schaltfläche" Farbe={"zweitrangig"}/>
</ThemeProvider>
Im obigen Code wird die Hintergrundfarbe der Taste Die Komponente wird sekundär sein, was eine grüne Farbe im Gegensatz zum Themenstil von Rot ist.
A Thema Das Objekt wird mit RNE geliefert und bietet zahlreiche standardmäßige Farbwerte. RNE bietet verschiedene Optionen wie die ThemaVerbraucher Komponente, useTheme() Haken und makeStyles() Hook-Generator für den Zugriff auf die Thema Objekt.
Der ThemaVerbraucher Die Komponente umschließt Ihre mit einer anonymen Funktion gerenderten Komponenten. Diese anonyme Funktion übernimmt Thema als Requisite.
Sie können auf die Themenwerte mit a zugreifen Stil Stütze:
importieren Reagieren aus 'reagieren';
importieren { Taste } aus 'reagieren-nativ';
importieren { ThemeConsumer } aus '@rneui/themed';
konst MeineKomponente = () => (
<ThemaVerbraucher>
{({ Thema }) => (
<Schaltflächentitel="ThemaVerbraucher" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativ können Sie die verwenden useTheme() Hook, um auf das Design innerhalb einer Komponente zuzugreifen.
Zum Beispiel:
importieren Reagieren aus 'reagieren';
importieren { Taste } aus 'reagieren-nativ';
importieren {useTheme} aus '@rneui/themed';konst MeineKomponente = () => {
konst {Thema} = useTheme();
zurückkehren (
<style={styles.container} anzeigen>
<Schaltflächentitel="Verwenden Sie Thema" style={{ color: theme.colors.primary }}/>
</View>
);
};
Der makeStyles() Der Hook-Generator ähnelt der Verwendung eines Stylesheets zum Definieren von Stilen. Wie das Stylesheet trennt es jedes Styling von außerhalb Ihrer gerenderten Komponente. Verweis auf die Thema Objekt innerhalb einer Requisite im Komponentenstil.
Themen mit TypeScript erweitern
RNE unterstützt TypeScript-Deklarationen in Ihrer App, sodass Entwickler davon profitieren können die Vorteile der Verwendung der TypeScript-Sprache.
Mit TypeScripts Deklaration zusammenführen, können Sie Themendefinitionen erweitern, um benutzerdefinierte Farben und Requisiten sowohl für die Standard- als auch für benutzerdefinierte Komponenten von RNE hinzuzufügen.
Um die Farben innerhalb des Themenobjekts zu erweitern, erstellen Sie ein separates TypeScript.ts Datei und deklarieren Sie das Modul @rneui/themed innerhalb der Datei.
Sie können dann Ihre benutzerdefinierten Farben hinzufügen und ihren erwarteten Typ angeben:
// **TypeScript.ts**importieren '@rneui/themed';
erklären Modul '@rneui/thematisch' {
Export SchnittstelleFarben{
primaryLight: Zeichenkette;
sekundäresLicht: Zeichenfolge;
}
}
Mit diesem Modul können Sie beim Erstellen eines Designs Ihre benutzerdefinierten Farben als Werte übergeben:
konst theme = createTheme({
Farben: {
primärLicht: "",
Sekundärlicht: ""
},
})
Jetzt sind die benutzerdefinierten Farben Teil Ihres Designobjekts und können über aufgerufen werden ThemeProvider, ThemeConsumer, oder der useTheme() Haken.
RNE-Komponenten vs. Native Komponenten reagieren
Komponentenbibliotheken wie React Native Elements sind eine großartige Möglichkeit, eine App schnell zum Laufen zu bringen. Sie konzentrieren sich eher auf die Struktur der App als auf die Details des Designs. Die Verwendung von RNE-Komponenten gegenüber React Native-Komponenten sollte sich in erster Linie nach dem Fokus Ihrer Anwendung und der Ihnen zur Verfügung stehenden Entwicklungszeit richten.