react-native => Estilo

Introducción

Los estilos se definen dentro de un objeto JSON con nombres de atributos de estilo similares como en CSS. Dicho objeto se puede poner en línea en el estilo prop de un componente o se puede pasar a la función StyleSheet.create(StyleObject) y se puede almacenar en una variable para un acceso en línea más corto utilizando un nombre de selector para él similar a una clase en CSS.

Sintaxis

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

Observaciones

La mayoría de los estilos nativos de React son sus formularios CSS, pero en camel case. Así, el text-decoration convierte en textDecoration .

A diferencia de CSS, los estilos no se heredan. Si desea que los componentes secundarios hereden un cierto estilo, debe proporcionárselos explícitamente al niño. Esto significa que no puede establecer una familia de fuentes para una View completa.
La única excepción a esto es el componente Text : los Text anidados heredan sus estilos principales.

Estilismo usando estilos en línea

Cada componente React Native puede tener un style prop. Puedes pasarle un objeto JavaScript con propiedades de estilo CSS:

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

Esto puede ser ineficiente ya que tiene que recrear el objeto cada vez que se renderiza el componente. Se prefiere usar una hoja de estilo.

Estilo usando una hoja de estilo

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() devuelve un objeto donde los valores son números. React Native sabe convertir estos ID numéricos en el objeto de estilo correcto.

Añadiendo múltiples estilos

Puede pasar una matriz a la propuesta de style para aplicar varios estilos. Cuando hay un conflicto, el último de la lista tiene prioridad.

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

Estilo condicional

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

Si el valor de isTrue es true , tendrá un color de fondo negro; de lo contrario, será blanco.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

react-native
Estilo

Buscar..