結構ハマったので備忘録としてまとめ。
React Native のアプリを Android で開発していて、要素の重なり方を zIndex
を使って設定しようとしていたのですが、zIndex
が働かないという現象に遭遇しました。
最初、記述する順番を変えてみたり、<View>
で囲ってみたりしてみたのですが、その方法では駄目でした…。
で、最終的にこちらの投稿が参考になりました。
zIndex isn’t working for a react native project – Stack Overflow
https://stackoverflow.com/questions/49121981/zindex-isnt-working-for-a-react-native-project
どうやら Android は zIndex
が効かないみたいです…?
さて修正方法ですが、zIndex
を指定したい要素に elevation
を一緒に指定します。
サンプルコードは下記のとおりです。
<View style={{ zIndex: 10, elevation: Platform.OS === 'android' ? 10 : 0, position: 'absolute', top: 10, right: 10, }}> ......... </View>
上記ページのサンプルコードでは、elevation: Platform.OS === 'android' ? 50 : 0
としていましたが、値は 10
で大丈夫でした。
この elevation
というプロパティは要素に影をつけるときにしか使ったことがなかったのですが、「elevation = 標高」という意味なので、重なり方を定義するのに必要みたいです。
React Native の公式サイトに説明があったので見てみたのですが…いまいちよく分かりませんでした…。
……まあ、動作したので一旦ヨシ!
以上、React Native アプリを Android で動作させたとき、zIndex が効かない時の対処法についてでした。
ご参考になれば幸いです。