Ich bin neu in React und verstehe die Vorteile der komponentenbasierten Inline-Stile. Aber ich frage mich, ob es einen vernünftigen Weg gibt, einen globalen Stil zu haben. Zum Beispiel möchte ich in meiner App dieselbe Text- und Schaltflächenfarbe verwenden.
Anstatt in jeder Komponente zu wiederholen (und sie anschließend bei Bedarf an x Stellen zu ändern), besteht mein erster Gedanke darin, eine 'Basis'-StyleSheet-Klasse in einer eigenen Datei zu erstellen und in meine Komponenten zu importieren.
Gibt es einen besseren oder mehr "Reagieren" Weg?
react-native
Patm
quelle
quelle
import { StyleSheet } from 'react-native';
style={defaultStyle}
muss hinzugefügt werden. Stattdessen können Sie ein erstellenDefaultView
und dieses anstelle des bereitgestellten verwendenview
, das Ihrer Spezifikation entspricht. Ich habe vor einiger ZeitErstellen Sie eine Datei für Ihre Stile (IE,
Style.js
).Hier ist ein Beispiel:
Fügen Sie in einer der Dateien, die Sie für Ihren Stil verwenden möchten, Folgendes hinzu:
quelle
Wenn Sie nur einige globale Variablen festlegen möchten, können Sie es versuchen.
AppStyles.js
index.ios.js
quelle
Sie können auch React-Native-Extended-Stylesheet ausprobieren , das globale Stilvariablen unterstützt:
quelle
Sie müssen eine Datei erstellen, um alle darin enthaltenen Stile wie ' styles.js ' zu speichern , und den CSS-Typcode nach Bedarf schreiben
und jetzt können Sie den globalen Stil verwenden, wie Sie sehen können
quelle
Versuchen Sie, meine Bibliothek reagieren-native-style-Tachyonen , die nicht nur Sie globale Stile gibt, sondern ein Design-first, reaktions Layouten System mit Breiten und Höhen in Bezug auf Ihre Wurzel Schriftgröße.
quelle
Alle diese Methoden beantworten die Frage direkt, aber für mich ist dies nicht die Möglichkeit, dies in einem komponentenbasierten Designsystem wie React zu tun.
Wir können mit atomaren Komponenten beginnen und sie dann ganz nach oben schichten und gruppieren. Der folgende Artikel könnte diesen Gedankengang klarer machen: http://atomicdesign.bradfrost.com/chapter-2/
Wenn Sie eine Basiskomponente benötigen, die nicht vorhanden ist, erstellen Sie diese. Dann können Sie damit andere, weniger spezifische Komponenten erstellen. zum Beispiel:
Dann
CustomText
überall verwenden stattText
. Sie können es auch tun , mitView
,div
,span
oder irgendetwas anderes.quelle
<Text />
mit<CustomText />
überall. Sie können CustomText sogar als Text importieren, sodass Sie nur den Import ersetzen müssen.Externe CSS-Datei main.css
Instanz der CSS-Datei in der Komponente erstellen.
quelle
Hier finden Sie eine elegante Möglichkeit, Ihre Stile zu sortieren und dann in die verschiedenen Komponenten zu importieren. Sie können einen Ordner erstellen, in dem Sie alle Stildateien zusammenstellen und eine Datei index.js erstellen, die als Fassade fungieren soll:
Die index.js sieht folgendermaßen aus:
und dann so importieren:
Hier für weitere Informationen:
https://thoughtbot.com/blog/structure-for-styling-in-react-native
quelle
Schauen Sie sich Shoutem-Themen für React Native an.
Folgendes erhalten Sie mit Shoutem Theme:
Globaler Stil, bei dem ein bestimmter Stil automatisch anhand seines Stilnamens auf die Komponente angewendet wird:
Aktivieren eines bestimmten komponentenspezifischen Stils mit
styleName
(wie CSS-Klasse):Automatische Stilvererbung:
Verschachtelter Stil für zusammengesetzte Komponenten:
Damit es funktioniert, müssen Sie
StyleProvider
die Wrapper-Komponente verwenden , die allen anderen Komponenten über den Kontext Stil verleiht. Ähnlich wie bei ReduxStoreProvider
.Außerdem müssen Sie Ihre Komponente mit dem Stil verbinden,
connectStyle
damit Sie immer die verbundene Komponente verwenden. Ähnlich wie bei Reduxconnect
.Sie können das Beispiel in der Dokumentation sehen.
Als letztes haben wir in unserem UI ToolKit eine Reihe von Komponenten bereitgestellt, die bereits mit dem Stil verbunden sind, sodass Sie sie einfach importieren und in Ihrem globalen Stil / Thema stylen können.
quelle