Как предотвратить совпадение макета с панелью состояния iOS

Я работаю над учебником для интерактивной навигации React. Я узнал, что все макеты начинают загружаться с верхней части экрана, а не ниже строки состояния. Это заставляет большинство макетов перекрываться со строкой состояния. Я могу исправить это, добавив прописку в представление при загрузке. Это реальный способ сделать это? Я не думаю, что добавление дополнений - это реальный способ его решения. Есть ли более элегантный способ исправить это?

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> 
            )   
    }    
}

Ниже показаны скриншоты до и после добавления дополнения.

Ответ 1

Существует очень простой способ исправить это. Создайте компонент.

Вы можете создать компонент 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') ? 20 : 0, //this is just to test if the platform is iOS to give it a height of 20, 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>
    )
  }
}

Ответ 2

Вы можете справиться с этим, добавив дополнение к компоненту панели навигации или просто объявление, которое имеет ту же самую высоту, что и панель состояния в верхней части дерева просмотра с фоновым цветом, например, приложение facebook.