new - react native run ios

Cómo evitar que el diseño se superponga con la barra de estado de iOS

Question

Estoy trabajando en un tutorial para la navegación React Native. Descubrí que todo el diseño comienza a cargarse desde la parte superior de la pantalla en lugar de debajo de la barra de estado. Esto hace que la mayoría de los diseños se superpongan con la barra de estado. Puedo solucionar esto agregando un relleno a la vista al cargarlos. ¿Es esta la forma real de hacerlo? No creo que agregar relleno manualmente sea una forma real de resolverlo. ¿Hay alguna forma más elegante de arreglar esto?

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

A continuación se muestran las capturas de pantalla antes y después de agregar el relleno. tutorial

Answer 1

Ahora puede usar SafeAreaView que se incluye en React Navigation:

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

Answer 2

Aquí hay una forma que funciona para iOS :

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

Answer 3

Hay una manera muy simple de arreglar esto. Haz un componente.

Puede crear un componente StatusBar y llamarlo primero después del primer contenedor de vista en sus componentes principales.

Aquí está el código para el que uso:

''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

Después de hacer esto y exportarlo a su componente principal, llámelo así:

import StatusBarBackground from ''./YourPath/StatusBarBackground''

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

Answer 4

Intenté una forma más simple para esto.

Podemos obtener la altura de la barra de estado en Android y usar SafeAreaView junto con él para que el código funcione en ambas plataformas.

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

Si desconectamos Platform.OS y StatusBar.currentHeight obtenemos los registros,

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

Altura activada: android 24 y Altura activada: android 24

Ahora, opcionalmente, podemos agregar margen / relleno a nuestra vista de contenedor utilizando

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

El código final en App.js está a continuación:

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 5

La solución @philipheinser realmente funciona.

Sin embargo, esperaría que el componente StatusBar React Native se encargará de eso por nosotros.

Desafortunadamente, no es así, pero podemos abstraerlo fácilmente creando nuestro propio componente a su alrededor:

./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> ) } Antes de:

Después:

Answer 6

Puede manejar esto agregando un relleno a su componente de barra de navegación o simplemente agregando una vista que tenga la misma altura que la barra de estado en la parte superior de su árbol de vistas con un color de fondo como lo hace la aplicación de Facebook.