React Nativeの複数スタイル指定


状態に合わせてスタイルの上書き(オーバーライド)をしたいことはよくある。

スタイル自体はStyleSheet.createで定義してると思ってください。

通常[](配列)を使えばいいのですがちょっとハマったことがあったので、3つの方法と注意する点を書いておきます。

[] 配列による定義

公式ドキュメントにもありますし、「reactnative style override」で調べて出てくるページでもこれが紹介されています。

 

[]では配列の深さに関わらず最後の要素を優先して上書きします。

StyleSheet.flattenという関数を使って実際に適応されるスタイルを見てみます。

深さに関係なく最後に定義した要素が採用されることがわかります。

 

普通に使う分にはこれで問題ないです。

ただライブラリなどのスタイル指定するときには注意が必要です。

 

例えばReact Native ElementsButtonbuttonStyleを設定することを考えます。

ここで[]を使った方法でborderRadiusを設定すると反映されません。

ソースを見てみましょう。

buttonStyle.borderRadiusで指定しているため、配列で渡すと認識されない。

 

つまりライブラリ側で配列で渡されることを想定していない場合に予期しないスタイルになってしまうことがあります。

対処方法

最も一般的な、フラットなオブジェクトで渡すことで問題は回避できます。

冒頭で書いたようにStyleSheet.flattenを使うと簡単に平滑化できます。

 

条件指定がなければスプレット構文(...)を使って結合すると簡潔です。

 

普段は気にする必要はないですが、こういうことがあるということを知っておくともしもの時に混乱しないで済むと思います。


コメントを残す

メールアドレスが公開されることはありません。