react-native => Styling

Einführung

Stile werden in einem JSON-Objekt mit ähnlichen Stilattributnamen wie in CSS definiert. Ein solches Objekt kann entweder in die Stilvorgabe einer Komponente integriert werden, oder es kann an die Funktion StyleSheet.create(StyleObject) und für einen kürzeren Inline-Zugriff in einer Variablen gespeichert werden, indem ein Selektorname für eine Klasse verwendet wird in CSS.

Syntax

<Component style={styleFromStyleSheet} />
<Component style={styleObject} />
<Component style={[style1,style2]} />

Bemerkungen

Die meisten React Native-Stile sind ihre CSS-Formen, jedoch im Kamelfall. Also, text-decoration wird textDecoration .

Im Gegensatz zu CSS werden Stile nicht vererbt. Wenn Sie möchten, dass untergeordnete Komponenten einen bestimmten Stil erben, müssen Sie ihn explizit dem untergeordneten Element zur Verfügung stellen. Das bedeutet, dass Sie keine Schriftfamilie für eine gesamte View festlegen können.
Die einzige Ausnahme ist die Text : Verschachtelte Text erben ihre übergeordneten Stile.

Styling mit Inline-Styles

Jede Reaktion Mutterkomponente kann eine nehmen style prop. Sie können ein JavaScript-Objekt mit CSS-Style-Eigenschaften übergeben:

<Text style={{color:'red'}}>Red text</Text>

Dies kann ineffizient sein, da das Objekt jedes Mal neu erstellt werden muss, wenn die Komponente gerendert wird. Die Verwendung eines Stylesheets wird bevorzugt.

Styling mit einem Stylesheet

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    red: {
        color: 'red'
    },
    big: {
        fontSize: 30
    }
});

class Example extends Component {
    render() {
        return (
            <View>
                <Text style={styles.red}>Red</Text>
                <Text style={styles.big}>Big</Text>
            </View>
        );
    }
}

StyleSheet.create() gibt ein Objekt zurück, bei dem die Werte Zahlen sind. React Native kann diese numerischen IDs in das richtige Stilobjekt konvertieren.

Mehrere Stile hinzufügen

Sie können ein Array an den Pass - style prop auf mehrere Arten gelten. Wenn ein Konflikt vorliegt, hat der letzte in der Liste Vorrang.

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    red: {
        color: 'red'
    },
    greenUnderline: {
        color: 'green',
        textDecoration: 'underline'
    },
    big: {
        fontSize: 30
    }
});

class Example extends Component {
    render() {
        return (
            <View>
                <Text style={[styles.red, styles.big]}>Big red</Text>
                <Text style={[styles.red, styles.greenUnderline]}>Green underline</Text>
                <Text style={[styles.greenUnderline, styles.red]}>Red underline</Text>
                <Text style={[styles.greenUnderline, styles.red, styles.big]}>Big red underline</Text>
                <Text style={[styles.big, {color:'yellow'}]}>Big yellow</Text>
            </View>
        );
    }
}

Bedingtes Styling

<View style={[(this.props.isTrue) ? styles.bgcolorBlack : styles.bgColorWhite]}>

Wenn der Wert von isTrue true ist true hat er einen schwarzen Hintergrund, ansonsten weiß.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

react-native
Styling

Suche…