react-native => стайлинг

Вступление

Стили определены в объекте JSON со сходными именами атрибутов стиля, например, в CSS. Такой объект может быть вставлен в стиле поддержки компонента или может быть передан функции StyleSheet.create(StyleObject) и сохранен в переменной для более короткого встроенного доступа с использованием имени селектора для него, аналогичного классу в CSS.

Синтаксис

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

замечания

Большинство типов React Native являются их формами CSS, но в случае с верблюдом. Итак, text-decoration становится textDecoration .

В отличие от CSS, стили не наследуются. Если вы хотите, чтобы дочерние компоненты наследовали определенный стиль, вы должны явно предоставить его ребенку. Это означает, что вы не можете установить семейство шрифтов для всего View .
Единственным исключением является компонент Text : вложенный Text s наследует их родительские стили.

Стилирование с использованием встроенных стилей

Каждый компонент React Native может использовать style . Вы можете передать ему объект JavaScript со свойствами стиля стиля CSS:

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

Это может быть неэффективным, поскольку он должен воссоздавать объект каждый раз, когда компонент визуализируется. Использование таблицы стилей является предпочтительным.

Стилирование с использованием таблицы стилей

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() возвращает объект, в котором значения являются числами. React Native знает, как преобразовать эти числовые идентификаторы в правильный объект стиля.

Добавление нескольких стилей

Вы можете передать массив в поддержку style чтобы применить несколько стилей. Когда есть конфликт, последний из списка имеет приоритет.

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

Условный стиль

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

Если значение isTrue true тогда он будет иметь черный цвет фона, иначе белый.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

react-native
стайлинг

Поиск…