浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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 が効かない時の対処法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)