障害メモ/React Navigationで作成するヘッダがステータスバーに被る

キーワード

  • React Native
  • React Navigation

現象

React Nativeにて、React Navigationで作るヘッダがステータスバーに被ってしまう。

  • expo経由・Android実機で被る
  • iOSのシミュレータでは問題ない
  • ビルドしてデプロイしたときにどうかは見てない

原因

分からない。

対策

StackNavigator()の第2引数に次を追加する。

{
  cardStyle: {
    paddingTop: (Platform.OS === 'ios')? 0: StatusBar.currentHeight
  }
}

なお、次のimportが必要。

import { Platform, StatusBar } from 'react-native'

備考

なし。

参考

作成日 2017-12-30