react-native => Messa in piega

introduzione

Gli stili sono definiti all'interno di un oggetto JSON con nomi di stili di stile simili, come nel CSS. Tale oggetto può essere messo in linea nel puntello di stile di un componente o può essere passato alla funzione StyleSheet.create(StyleObject) e memorizzato in una variabile per l'accesso inline più breve utilizzando un nome di selettore simile a una classe in CSS.

Sintassi

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

Osservazioni

La maggior parte degli stili React Native sono le loro forme CSS, ma nel caso cammello. Quindi, la text-decoration diventa textDecoration .

A differenza del CSS, gli stili non vengono ereditati. Se si desidera che i componenti figlio ereditino un determinato stile, è necessario fornirlo esplicitamente al figlio. Ciò significa che non è possibile impostare una famiglia di caratteri per un'intera View .
L'unica eccezione è il componente Text : i Text nidificati ereditano i loro stili genitore.

Styling con stili in linea

Ogni componente React Native può assumere un puntello style . Puoi passarlo un oggetto JavaScript con proprietà di stile in stile CSS:

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

Questo può essere inefficiente in quanto deve ricreare l'oggetto ogni volta che viene eseguito il rendering del componente. È preferibile l'uso di un foglio di stile.

Styling usando un foglio di stile

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() restituisce un oggetto in cui i valori sono numeri. React Native sa convertire questi ID numerici nell'oggetto di stile corretto.

Aggiunta di più stili

È possibile passare un array al puntello di style per applicare più stili. Quando c'è un conflitto, l'ultimo nella lista ha la precedenza.

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

Styling condizionale

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

Se il valore di isTrue è true , avrà un colore di sfondo nero altrimenti bianco.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

react-native
Messa in piega

Ricerca…