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 propに配列を渡して、複数のスタイルを適用することができます。競合が発生すると、リストの最後のものが優先されます。

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場合は、背景色が黒色になります。