React Native Styling: Styled Components, Flexbox Layouts, and More

React Native provides an API for creating stylesheets and styling your components: StyleSheet.

import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class App extends Component { render () { return (  I am a header! I am some blue text.  ); } } const styles = StyleSheet.create({ header: { fontSize: 20 }, text: { color: 'blue' } });

While regular CSS stylesheets aren’t valid, React Native’s superset of CSS is very similar to traditional CSS.

Many CSS properties (e.g. color, height, top, right, bottom, left) are the same in StyleSheet. Any CSS properties that have hyphens (e.g. font-size, background-color) must be changed to camelCase (e.g. fontSize, backgroundColor).

Not all CSS properties exist in StyleSheet. Since there is no true concept of hovering on mobile devices, CSS hover properties don’t exist in React Native. Instead, React Native provides Touchable components that respond to touch events.

Stile werden auch nicht wie bei herkömmlichem CSS vererbt. In den meisten Fällen müssen Sie den Stil jeder Komponente deklarieren.

Flexbox-Layouts

React Native verwendet eine Implementierung von Flexbox ähnlich dem Webstandard. Standardmäßig sind Elemente in der Ansicht auf festgelegt display: flex.

Wenn Sie keine Flexbox verwenden möchten, können Sie React Native-Komponenten auch über relativeoder absolutepositionieren.

Flexbox in React Native ist standardmäßig flexDirection: columnanstelle von flex-direction: row(Webstandard). Der columnWert zeigt flexible Elemente vertikal an, wodurch mobile Geräte im Hochformat aufgenommen werden können.

Um mehr über Flexbox zu erfahren, besuchen Sie diese ausführliche Anleitung zu CSS-Tricks und einem gamifizierten Lernansatz mit Flexbox Froggy.

Gestaltete Komponenten

Das Einfügen vieler Stile in eine Datei mit einer Komponente ist nicht immer einfach zu pflegen. Gestaltete Komponenten können dieses Problem lösen.

Beispielsweise kann eine Schaltflächenkomponente an mehreren Stellen in einer Anwendung verwendet werden. Das Kopieren und Einfügen des Stilobjekts mit jeder Button-Instanz wäre ineffizient. Erstellen Sie stattdessen eine wiederverwendbare Button-Komponente im Stil:

import React from 'react'; import { Text, TouchableOpacity } from 'react-native'; const Button = ({ onPress, children }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); }; export default Button; const styles = { textStyle: { alignSelf: 'center', color: '#336633', fontSize: 16, fontWeight: '600', paddingTop: 10, paddingBottom: 10 }, buttonStyle: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#336633', paddingTop: 4, paddingBottom: 4, paddingRight: 25, paddingLeft: 25, marginTop: 10, width: 300 } };

Die gestaltete Button-Komponente kann einfach importiert und in der gesamten Anwendung verwendet werden, ohne das Stilobjekt wiederholt zu deklarieren:

import React, { Component } from 'react'; import { TextInput, View } from 'react-native'; import Button from './styling/Button'; export default class Login extends Component { render() { return (    Log In  ); } }

Bibliotheken für das Styling

Es gibt einige beliebte Bibliotheken für das Styling von React Native. Einige von ihnen bieten ähnliche Funktionen wie Bootstrap, einschließlich Standardformularen, Schaltflächenstilen und Seitenlayoutoptionen.

Eine der beliebtesten Bibliotheken sind gestaltete Komponenten. Es gibt viele andere, die Sie auf npm und GitHub finden können, um es selbst zu versuchen.