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

Je suis en train de travailler sur tutoriel pour Réagir Natif de navigation. J'ai découvert que toute la présentation commence à charger à partir du haut de l'écran plutôt qu'au-dessous de la barre d'état. Ainsi, la plupart des mises en page de chevauchement avec la barre d'état. Je peux résoudre ce problème en ajoutant un padding à la vue lors de leur chargement. Est-ce la façon de le faire? Je ne pense que l'ajout manuel d'un rembourrage est en fait un moyen de les résoudre. Est-il une façon plus élégante 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> 
            )   
    }    
}

Ci-dessous montre les captures d'écran avant et après le remplissage est ajouté.
Comment empêcher la mise en page de chevauchement avec iOS barre d'état

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

  • Bonne question, mais vous pourriez peut-être réduire les images.
  • stackoverflow.com/a/39300715/1540350 <- cette réponse ne sera pas seulement de résoudre le problème évoqué ici, mais même vous donner la possibilité de la couleur de l'arrière-plan de la barre d'état sous iOS et Android.
InformationsquelleAutor Cliff | 2017-03-04
  1. 33

    Il y a un moyen très simple de résoudre ce problème. Faites un composant.

    Vous pouvez créer une Barre de composant et de l'appeler en premier après le premier point de vue wrapper dans votre parent composants.

    Voici le code pour 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 de l'exporter vers votre composant principal, l'appeler comme ceci:

    import StatusBarBackground from './YourPath/StatusBarBackground'

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

     

    • MidnightBlue est pas valide, dit par Réagir Natif: Avertissement: Échec de la prop type: Invalid prop backgroundColor fourni
    • Il devrait être midnightblue.
    • L'iOS barre d'état n'est pas un correctif de taille. Il peut être plus grande lorsque le partage de connexion Wifi ou à un appel.
    • Comment puis-je l'utiliser lors de l'utilisation de Réagir de navigation raccordement avec redux, toutes les pages sont dans une pile de navigateur ou de l'onglet navigateur (nested) et de le raccorder avec redux
    • Si vous importez le réagir composant natif "Barre d'état" et ensuite utiliser: height: (Platform.OS === 'ios') ? 20 : StatusBar.currentHeight, au lieu de ? 20 : 0, vous obtenez le même résultat sur Android.
    • Vrai ... en plus 20px est toujours mal sur 5.5" affiche (qui sont de 56 physique pixels / 3 displayPixelRatio = 18px) ou iPhoneX (où il est 132 / 3 = 44px).

    InformationsquelleAutor Luis Rizo
  2. 46

    Maintenant, vous pouvez utiliser SafeAreaView qui est inclus dans Réagissent de Navigation:

    <SafeAreaView>
    ... your content ...
</SafeAreaView>
    • Peut-être bon de noter que ce composant est inclus dans react-navigation maintenant par défaut.
    • cela ne résout pas le problème de la barre d'état de chevauchement--j'ai enveloppé mon application dans SafeAreaView et mon application encore chevauche la Barre d'état. Il semble être orientée vers l'iPhone X notch/coins arrondis situation
    • Vous n'avez pas envelopper votre application, vous envelopper d'un écran en elle.
    • Ohh, c'est gentil! Je l'aime.
    • N'est pas correcte. Fonctionne très bien sur tous les appareils iPhone, tant que c'est > iOS 11.
    • Vous avez raison. Ce n'est pas très rigide pour iPhone X.

    InformationsquelleAutor Greg Ennis
  3. 14

    @philipheinser solution ne fonctionne en effet.

    Toutefois, je m'attends à ce que Réagir originaire de La barre d'état composante à gérer pour nous.

    Il n'a pas, malheureusement, mais nous pouvons abstrait que l'écart assez facilement en créant notre propre composant autour d'elle:

    ./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:

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

    Après:

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

    InformationsquelleAutor Asaf Katz
  4. 11

    J'ai essayé un moyen plus simple pour cela.

    Nous pouvons obtenir la hauteur de la Barre d'État sur android et utiliser SafeAreaView le long avec le code fonctionne sur les deux plates-formes.

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

    Si nous déconnecter Platform.OS et StatusBar.currentHeight nous obtenir les journaux,

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

    Hauteur sur: android 24 et
    Hauteur: android 24

    Nous pouvons maintenant vous pouvez ajouter margin/padding à notre conteneur de vue à l'aide de

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

    La version finale du code de 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
  }
});
    • Je l'ai essayé sur android et ça fonctionne. Je ne peux pas le tester sur iOS pour l'instant, mais comme je sais que la SafeArea est sur iOS, je suis sûr qu'on doit y travailler aussi.
    InformationsquelleAutor Gaurav Saluja
  5. 2

    Ici est une manière qui fonctionne pour iOS:

    <View style={{height: 20, backgroundColor: 'white', marginTop: -20, zIndex: 2}}>
   <StatusBar barStyle="dark-content"/></View>
    InformationsquelleAutor angusyoung84
  6. 1

    Vous pouvez gérer cela en ajoutant un padding à votre barre de navigation composant ou tout simplement ad un point de vue qui a la même hauteur de la barre d'état en haut de votre point de vue sur l'arbre avec un backgroundcolor comme le facebook app ne ce.

    • Est que la valeur de hauteur fixe et ne change pas de n'importe quel téléphone que vous avez? Si oui, où puis-je trouver des informations sur le bon de valeur spécifique pour iOS / Android?
    InformationsquelleAutor philipheinser