[解決済み] iOSのステータスバーとレイアウトが重ならないようにする方法

質問

私は今 チュートリアル を作成しています。私は、すべてのレイアウトがステータスバーの下ではなく、画面の上部からロードを開始することを発見しました。このため、ほとんどのレイアウトがステータスバーと重なってしまいます。私はそれらをロードするときにビューにパディングを追加することによってこれを修正することができます。これは実際に行う方法ですか？手動でパディングを追加することが実際の解決方法とは思えません。これを修正するために、よりエレガントな方法はありますか？

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';

export default class MyScene extends Component {
    static get defaultProps() {
            return {
                    title : 'MyScene'    
            };  
    }   
    render() {
            return (
                    <View style={{padding: 20}}> //padding to prevent overlap
                            <Text>Hi! My name is {this.props.title}.</Text>
                    </View> 
            )   
    }    
}

以下は、パディングを追加する前と後のスクリーンショットです。

どのように解決するのですか？

非常に簡単な解決方法があります。コンポーネントを作成します。

StatusBarコンポーネントを作成し、親コンポーネントの最初のビューラッパーの後に最初に呼び出すことができます。

以下は私が使っているもののコードです。

'use strict'
import React, {Component} from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';

class StatusBarBackground extends Component{
  render(){
    return(
      <View style={[styles.statusBarBackground, this.props.style || {}]}> //This part is just so you can change the color of the status bar from the parents by passing it as a prop
      </View>
    );
  }
}

const styles = StyleSheet.create({
  statusBarBackground: {
    height: (Platform.OS === 'ios') ? 18 : 0, //this is just to test if the platform is iOS to give it a height of 18, else, no height (Android apps have their own status bar)
    backgroundColor: "white",
  }

})

module.exports= StatusBarBackground

このようにして、メインコンポーネントにエクスポートした後、次のように呼び出します。

import StatusBarBackground from './YourPath/StatusBarBackground'

export default class MyScene extends Component {
  render(){
    return(
      <View>
        <StatusBarBackground style={{backgroundColor:'midnightblue'}}/>
      </View>
    )
  }
}