React Native で躓きそうなところがあったので備忘録としてまとめ。
タイトル通り、View を半透明にした時の挙動についてです。
要素の透明度は opacity で指定することができるのですが、親要素にこれを指定すると、子要素までその透明度が引き継がれてしまうようでした。
例えば、親要素の View を opacity を使って半透明にしていると、子要素に Image などを配置した場合、この画像まで半透明になってしまいます。
これは非常に困るので、どうにかしたい！と思っていたところ、下記の記事を発見しました。
ReactNativeで半透過なViewをつくる – Qiita
https://qiita.com/shim0mura/items/fcdee0165c462a2934d7
上記の記事によると opacity を使うのではなく、backgroundColor に rgba() を使えばいいのだそうです。
rgba() を使えば、子要素の透明度に影響は出ないので、どうしても opacity でなければいけない！という場合を除き、backgroundColor で透明度をしていするようにしましょう。
…というか、React Native でも rgba() って使えるんですね…。
まだ、React Native のスタイルでどれが使えるかがはっきりわかっていないところがあったので、ちょっと盲点でした。
以上、React Native で View を半透明にした時の挙動と注意点についてでした。
ご参考になれば幸いです。
