【react-natve】セーフティーエリアに対応する

お題

react-nativeアプリのセーフティーエリアを設定する

iphoneに対応したアプリを作る時に対応しなければいけないのがセーフティーエリアの作成ですが

react-nativeでも同じ様な問題があります。

react.jsではcssを使ってconstant(safe-area-inset-top)と設定しないといけませんが

react-nativeでは最初から「SafeAreaView」というパーツが標準で備わっているので

通常はこちらを使ってセーフティーエリアを作成します。

使い方は、以下のようにSafeAreaViewでViewを囲みます。

import {View, SafeAreaView} from 'react-native';

<SafeAreaView style={historyStyle.safeArea}>
  <View style={historyStyle.contents}>
  </View>
</SafeAreaView>

スタイルは全体にセーフティーエリアを広げたいのでflex:1を設定

色は白色にしていますがどの色でも問題ありません。

const historyStyle = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

シミュレータで確認すると、最上部と最下部にセーフティーエリアが確立されているかと

思います。これでiphonex以降のセーフティーエリアに対するレイアウト浸食を考慮せずに

コーディングできるようになりました。

※iphonex以降でご確認ください。