tech

ReactNativeでiphoneバージョンごとのアプリヘッダーのパディング対応

アプリヘッダーのパディング

iphoneX系統とそれまでのもの(5.5インチ系と6.5インチ系)ではサイズが変わる

ios11系の対応

SafeAreaViewという便利コンポーネントがある

ただし、ios10系以前だと働かない模様

iOS10系以前の対応

versionに応じてpaddingつけてやればよい。

iphoneX以降はiOS11以上であるはずなので、
iOS10未満は5.5インチ系列のはず

1
2
3
4
5
6
7
8
9
10
11
12
 
constructor(){
  const majorVersionIOS = parseInt(Platform.Version, 10);
  const paddingTop = majorVersionIOS < 11? 35 : 15;
}

render() {
  return (
	  <SafeAreaView style={{paddingTop}} >
		  <MainScreen />
	  </ SafeAreaView>
	);
}

参考

https://github.com/facebook/react-native/issues/17638#issuecomment-359198419