Bevor wir mit der Arbeit an Komponenten fortfahren und tiefer in React Native eintauchen, lassen Sie uns das Styling ansprechen. Derzeit haben wir drei Elemente zu unserem Projekt hinzugefügt, aber die visuelle Darstellung könnte optimiert werden.

Inline-Stile

Inline-Stile in React Native sind ähnlich wie die Stile, die Sie in regulärem React für das Web schreiben. Stile werden als Objekte direkt innerhalb der Props der Komponente übergeben.

Theorie

• Inline-Stile ermöglichen eine schnelle und unkomplizierte Möglichkeit, Stile direkt auf eine Komponente anzuwenden;
• Inline-Stile verwenden JavaScript-Objekte, um Stile direkt innerhalb der Props der Komponente zu definieren;
• Jede Stil-Eigenschaft wird in camelCase geschrieben, ähnlich wie in CSS, jedoch ohne Bindestriche;
• Werte können je nach Eigenschaft entweder Zeichenfolgen oder Zahlen sein.

Beispiel

StyleSheet

React Native empfiehlt die Verwendung der StyleSheet-API zur Definition von Stilen, insbesondere zur Leistungsoptimierung.

Theorie

• Die Methode StyleSheet.create wird verwendet, um ein optimiertes Stilobjekt zu erstellen;
• Stile, die mit StyleSheet.create erstellt werden, werden während der Build-Zeit verarbeitet, was zu einer besseren Leistung im Vergleich zu Inline-Stilen führt;
• Stil-Eigenschaften werden im gleichen camelCase-Format wie Inline-Stile definiert;
• Das resultierende Objekt wird dann in der Komponente referenziert.

Beispiel

Ergebnis nach der Implementierung einer der Ansätze.

In der Praxis