こけこっこー

がんばる

React Nativeでstyleのオブジェクトを統合する

ReactNativeではstyleをStyleSheet.create()して作ります。 以下のようなstyleを作りました。

const styles = StyleSheet.create({
    styleA: {
      width: '30%',
      height: '42%',
    },
    styleB: {
      backgroundColor: '#CCC3BA',
    }
});

styleAstyleB を統合させたくて以下のようにやったのですが、エラーになってしまいました。

const styleAB = {...styles.styleA, ...styles.styleB};

そもそも styles.styleAStyleSheet.create() によって生成されているので、出力がnumberになってしまうようです。 なので、上記のようなことがしたければ、 StyleSheet.flatten() を使う必要があります。

const styleAB = StyleSheet.flatten([styles.styleA, styles.styleB]);