react-native => Stylizacja

Wprowadzenie

Style są zdefiniowane w obiekcie JSON o podobnych nazwach atrybutów stylów, jak w CSS. Taki obiekt może zostać wstawiony bezpośrednio do rekwizytu stylu komponentu lub może zostać przekazany do funkcji StyleSheet.create(StyleObject) i może być przechowywany w zmiennej w celu uzyskania krótszego dostępu inline za pomocą nazwy selektora podobnej do klasy w CSS.

Składnia

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

Uwagi

Większość stylów React Native to ich formy CSS, ale w przypadku wielbłądów. Więc text-decoration staje textDecoration .

W przeciwieństwie do CSS style nie są dziedziczone. Jeśli chcesz, aby komponenty potomne dziedziczyły określony styl, musisz jawnie podać go dziecku. Oznacza to, że nie można ustawić rodziny czcionek dla całego View .
Jedynym wyjątkiem jest składnik Text : Text zagnieżdżony dziedziczy ich style nadrzędne.

Stylizacja przy użyciu stylów wbudowanych

Każdy komponent React Native może przyjmować rekwizyty style . Możesz przekazać obiekt JavaScript z właściwościami stylu CSS:

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

Może to być nieefektywne, ponieważ musi odtwarzać obiekt przy każdym renderowaniu komponentu. Preferowane jest używanie arkusza stylów.

Stylizacja za pomocą arkusza stylów

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() zwraca obiekt, w którym wartościami są liczby. React Native wie, jak przekonwertować te numeryczne identyfikatory na właściwy obiekt stylu.

Dodawanie wielu stylów

Możesz przekazać tablicę do prop style aby zastosować wiele stylów. W przypadku konfliktu pierwszeństwo ma ostatni z listy.

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

Styl warunkowy

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

Jeśli wartość isTrue ma wartość true wówczas będzie miała czarny kolor tła, w przeciwnym razie biały.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

react-native
Stylizacja

Szukaj…