react-native => styling

Introduktion

Stilar definieras i ett JSON-objekt med liknande stylingattributnamn som i CSS. Ett sådant objekt kan antingen sättas inline i en komponents StyleSheet.create(StyleObject) eller det kan skickas till funktionen StyleSheet.create(StyleObject) och lagras i en variabel för kortare inline-åtkomst genom att använda ett väljarnamn för det som liknar en klass i CSS.

Syntax

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

Anmärkningar

De flesta reagerade infödda stilar är deras CSS-former, men i kamelfall. Så text-decoration blir textDecoration .

Till skillnad från i CSS blir stilar inte ärvda. Om du vill att barnkomponenter ska ärva en viss stil måste du uttryckligen lämna det till barnet. Det betyder att du inte kan ställa in en teckensnittsfamilj för en hel View .
Ett undantag från detta är Text : kapslade Text ärver deras överordnade stilar.

Styling med inline stilar

Varje React Native komponent kan ta en style prop. Du kan skicka det ett JavaScript-objekt med CSS-stilstilegenskaper:

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

Detta kan vara ineffektivt eftersom det måste återskapa objektet varje gång komponenten återges. Att använda ett formatmall föredras.

Styling med hjälp av ett stilark

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() returnerar ett objekt där värdena är siffror. React Native vet att konvertera dessa numeriska ID: er till rätt stilobjekt.

Lägga till flera stilar

Du kan skicka en array till style prop applicera flera stilar. När det finns en konflikt har den sista i listan företräde.

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

Villkorlig styling

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

Om värdet på isTrue är true kommer det att ha svart bakgrundsfärg annars vit.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

react-native
styling

Sök…