React Native Styles

In diesem Tutorial zeige ich wie man für React Native Styles anlegt. Das kann man sowohl lokal in der Quelldatei als auch global für das Projekt machen. Mit Styles ändert man das Look & Feel einer App einfach und schnell.

React Native Styles

Genau wie CSS im Web abstrahiert man als Entwickler das Design so gut wie möglich von der Programmlogik. Auch für React Native ist es möglich StyleSheets zu definieren. Dort werden für definierte Namen Style Informationen hinterlegt, die man beim Steuerelement über diesen Namen referenziert. StyleSheets sind bestandteil von React Native und werden im Source File wie folgt benutzt:

import { StyleSheet } from 'react-native';

Lokal

Im Source File werden die Styles an beliebiger Stelle beispielsweise wie folgt definiert.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
...

Über den Variablennamen styles kann man die definierten Styles nun im JSX wie folgt verwendet werden:

In diesem Fall würde die SafeAreaView die weiter oben definierten Styles flex: 1 und backgroundColor: #ffffff zugewiesen bekommen. Die in der Source Datei definierten Styles sind nur in diesem File gültig. Styles kann man aber auch global definieren.

Global

In meinem Projekt habe ich ein Styles Source File definiert, in dem ich globale Styles für das ganze Projekt definiere. Die Definition unterscheidet sich nur gering, die Styles werden lediglich exportiert:

export default StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
...

Will eine Datei die globalen Styles verwenden müssen diese zuerst importiert werden. Die Quelldatei heißt bei mir Style.tsx (TypeScript!), weshalb der Import wie folgt durchgeführt wird:

import styles from '../Style';

Die Verwendung funktioniert 1:1 wie bereits in der lokalen Version gezeigt. Mit style={styles.container} werden die als container definierten Styles dem Objekt zugeordnet.

Fazit

Mit StyleSheets kann man in React Native Styles definieren die lokal in der Quelldatei oder global für das gesamte Projekt gelten. Somit ist es relativ einfach die komplette App mit Änderung einer einzigen Datei neu zu stylen und eventuell auch unterschiedliche Styles anzubieten. Die Trennung von Programmlogik und Design ist wie mit HTML möglich und üblich.