【React Native】AndroidアプリでzIndexが効かない

結構ハマったので備忘録としてまとめ。
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 が効かない時の対処法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG