react-native => styling

Invoering

Stijlen worden gedefinieerd binnen een JSON-object met vergelijkbare stijlkenmerknamen zoals in CSS. Zo'n object kan ofwel inline worden geplaatst in de stijlprop van een component of het kan worden doorgegeven aan de functie StyleSheet.create(StyleObject) en worden opgeslagen in een variabele voor kortere inline-toegang door een selectornaam te gebruiken die lijkt op een klasse in CSS.

Syntaxis

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

Opmerkingen

De meeste React Native stijlen zijn hun CSS-vormen, maar in kameelgeval. Dus, text-decoration wordt textDecoration .

In tegenstelling tot CSS worden stijlen niet geërfd. Als u wilt dat onderliggende componenten een bepaalde stijl erven, moet u deze expliciet aan het kind verstrekken. Dit betekent dat u geen lettertypefamilie voor een hele View .
De enige uitzondering hierop is de component Text : geneste Text de bovenliggende stijl over.

Styling met inline stijlen

Elke component van React Native kan een style nemen. U kunt het een JavaScript-object met CSS-stijl stijleigenschappen geven:

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

Dit kan inefficiënt zijn omdat het het object telkens opnieuw moet maken wanneer de component wordt weergegeven. Het gebruik van een stylesheet heeft de voorkeur.

Styling met behulp van een 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() retourneert een object waarvan de waarden getallen zijn. React Native weet deze numerieke ID's om te zetten in het juiste stijlobject.

Meerdere stijlen toevoegen

U kunt een array doorgeven aan de style om meerdere stijlen toe te passen. Wanneer er een conflict is, heeft de laatste in de lijst voorrang.

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>
        );
    }
}

Voorwaardelijke styling

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

Als de waarde van isTrue true is, heeft deze een zwarte achtergrondkleur, anders wit.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

react-native
styling

Zoeken…