Comment empêcher le chevauchement de la mise en page avec la barre d'état d'iOS ?

Question

Je travaille sur tutoriel pour la navigation React Native. J'ai découvert que toutes les mises en page commencent à se charger depuis le haut de l'écran au lieu de se charger depuis le bas de la barre d'état. Cela entraîne un chevauchement de la plupart des mises en page avec la barre d'état. Je peux corriger cela en ajoutant un padding à la vue lors de son chargement. Est-ce la bonne façon de procéder ? Je ne pense pas que l'ajout manuel d'un renflement soit un moyen efficace de résoudre ce problème. Existe-t-il un moyen plus élégant de résoudre ce problème ?

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

Vous trouverez ci-dessous les captures d'écran avant et après l'ajout du rembourrage.

Answer 1

Vous pouvez maintenant utiliser SafeAreaView qui est inclus dans React Navigation :

<SafeAreaView>
    ... your content ...
</SafeAreaView>

Answer 2

Il existe un moyen très simple de résoudre ce problème. Créez un composant.

Vous pouvez créer un composant StatusBar et l'appeler après le premier wrapper de vue dans vos composants parents.

Voici le code de celui que j'utilise :

'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

Après avoir fait cela et l'avoir exporté vers votre composant principal, appelez-le comme ceci :

import StatusBarBackground from './YourPath/StatusBarBackground'

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

Answer 3

J'ai essayé une méthode plus simple pour cela.

Nous pouvons obtenir la hauteur de la barre d'état sur Android et utiliser SafeAreaView avec elle pour que le code fonctionne sur les deux plateformes.

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

Si nous nous déconnectons Platform.OS y StatusBar.currentHeight on obtient les journaux,

console.log('Height on: ', Platform.OS, StatusBar.currentHeight);

Hauteur sur : Android 24 et Hauteur sur : Android 24

Nous pouvons maintenant ajouter de manière facultative des marges et des renforts à notre vue conteneur en utilisant

paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

Le code final dans App.js est ci-dessous :

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={styles.container}>
          <Text>Hello World</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

Answer 4

@philipheinser solution fonctionne en effet.

Cependant, je m'attendrais à ce que l'outil React Native Barre d'état s'en chargera pour nous.

Malheureusement, ce n'est pas le cas, mais nous pouvons faire abstraction de cela assez facilement en créant notre propre composant autour de lui :

./StatusBar.js

import React from 'react';
import { View, StatusBar, Platform } from 'react-native';

// here, we add the spacing for iOS
// and pass the rest of the props to React Native's StatusBar

export default function (props) {
    const height = (Platform.OS === 'ios') ? 20 : 0;
    const { backgroundColor } = props;

    return (
        <View style={{ height, backgroundColor }}>
            <StatusBar { ...props } />
        </View>
    );
}

./index.js

import React from 'react';
import { View } from 'react-native';

import StatusBar from './StatusBar';

export default function App () {
    return (
      <View>
        <StatusBar backgroundColor="#2EBD6B" barStyle="light-content" />
        { /* rest of our app */ }
      </View>
    )
}

Avant :

Après :

Answer 5

Vous pouvez gérer cela en ajoutant un padding à votre composant de barre de navigation ou simplement ajouter une vue qui a la même hauteur que la barre d'état en haut de votre arbre de vue avec une couleur de fond comme l'application facebook le fait.