web-dev-qa-db-fra.com

Comment éviter le chevauchement de la présentation avec la barre d'état iOS

Je travaille sur tutoriel pour React navigation native. J'ai découvert que toute la mise en page commençait à se charger depuis le haut de l'écran plutôt que sous la barre d'état. Cela fait que la plupart des mises en page se chevauchent avec la barre d'état. Je peux résoudre ce problème en ajoutant un remplissage à la vue lors du chargement. Est-ce la manière réelle de le faire? Je ne pense pas que l'ajout manuel de rembourrage est un moyen réel de le résoudre. Y at-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. before adding padding

after adding padding

iosreact-native
64
Cliff

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

Vous pouvez créer un composant StatusBar et l'appeler en premier 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 l'avoir fait et 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>
    )
  }
}

32
Luis Rizo

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

<SafeAreaView>
    ... your content ...
</SafeAreaView>
39
Greg Ennis

La solution @philipheinser fonctionne vraiment.

Cependant, je m'attendrais à ce que le composant React Native --- StatusBar le gère pour nous.

Malheureusement, nous ne pouvons pas le résumer 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>
    )
}

14
Asaf Katz

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

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

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

Si nous nous déconnectons Platform.OS et StatusBar.currentHeight, nous obtenons les journaux,

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

Hauteur sur: Android 24 et Hauteur sur: Android 24.

Nous pouvons maintenant éventuellement ajouter des marges/marges à 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
  }
});
8
Gaurav Saluja

Voici un moyen qui fonctionne pour iOS:

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

Vous pouvez gérer cela en ajoutant un rembourrage à votre composant de barre de navigation ou simplement en ajoutant une vue ayant le même niveau que la barre d'état en haut de votre arborescence de vues avec une couleur d'arrière-plan comme le fait l'application facebook.

1
philipheinser