react-native
스타일링

소개

통사론

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

비고

인라인 스타일을 사용하여 스타일 지정

각 React Native 구성 요소는 style 소품을 사용할 수 있습니다. CSS 스타일 스타일 속성을 사용하여 JavaScript 객체에 전달할 수 있습니다.

<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는이 숫자 ID를 올바른 스타일 객체로 변환하는 것을 알고 있습니다.

여러 스타일 추가하기

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 경우는 검정 바탕색, 그렇지 않으면 흰색이됩니다.