Color de fondo de React Native SafeAreaView: ¿cómo asignar dos colores de fondo diferentes para la parte superior e inferior de la pantalla?

4 minutos de lectura

avatar de usuario
patinar para comer

Estoy usando SafeAreaView de React Native 0.50.1 y funciona bastante bien excepto por una parte. Asigné el color de fondo naranja a SafrAreaView, pero no puedo descifrar cómo cambiar el fondo del área insegura inferior a negro.

Aquí está el código e incluí el resultado esperado y el resultado real. ¿Cuál es la mejor manera de hacer que la parte inferior de la pantalla sea negra en lugar de naranja?

import {
  ...
  SafeAreaView
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#FF5236'
  }
})

Quiero tener la parte superior naranja y el fondo negro.

BZuOw

Pero a continuación es lo que obtengo ahora.

tN8mz

  • ¿Tuviste suerte con una solución para esto?

    – Dan Levelle

    20 de febrero de 2018 a las 8:30

Pude resolver esto usando una versión de las respuestas de Yoshiki y Zach Schneider. Observe cómo configura los mejores SafeAreaView flex:0 para que no se expanda.

render() {
  return (
    <Fragment>
      <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
      <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
        <View style={{ flex: 1, backgroundColor: 'white' }} />
      </SafeAreaView>
    </Fragment>
  );
}

ingrese la descripción de la imagen aquí

  • Esta solución es, con mucho, la mejor, debería ser la respuesta reconocida a esta pregunta.

    –Rob Norback

    5 de diciembre de 2018 a las 1:30

  • ¿Cuál es el papel de flex: 0 en la primera vista de área segura?

    – Arun Kumar

    27 de noviembre de 2019 a las 5:19

  • Puede abreviar el componente Fragment de sintaxis con etiquetas vacías: <>

    – J-ho

    1 de febrero de 2020 a las 16:00

  • Este ejemplo parece que ya no funciona. La parte gris ahora está justo debajo de la roja, luego el contenido blanco.

    – Soullivaneuh

    25 de noviembre de 2020 a las 19:29

  • 🚀 Ciencia espacial. ¡Gracias!

    – Jeff Gilbert

    7 de junio de 2021 a las 9:53

Pude resolver esto usando algún tipo de pirateo de posición absoluta. Vea el siguiente ajuste. No es una prueba futura de ninguna manera, pero resuelve el problema que tenía.

import {
  ...
  SafeAreaView,
  View
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
        <View style={styles.fixBackground} />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#FF5236'
  },
  fixBackground: {
    backgroundColor: 'orange',
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: 0,
    height: 100,
    zIndex: -1000,
  }
})

Me encontré con el mismo problema y pude resolverlo con lo siguiente:

const styles = StyleSheet.create({
  outerWrapper: {
    backgroundColor: 'orange',
  },
  innerWrapper: {
    backgroundColor: 'black',
  },
});

// snip

const MyComponent = ({ content }) => (
  <View style={styles.outerWrapper}>
    <SafeAreaView />

    <SafeAreaView style={styles.innerWrapper}>
      {content}
    </SafeAreaView>
  </View>
);

los outerWrapper aplica el color de fondo naranja en la parte superior. El primero <SafeAreaView /> empuja el segundo hacia abajo para que comience al principio del “área segura” (debajo de la barra de estado). Entonces el segundo SafeAreaView ocupa el resto de la pantalla (incluyendo el área inferior “insegura”) y le da el color de fondo negro.

avatar de usuario
ANTARES_SEO

En 2022, ¡puedo resolver esto usando edge prop de SafeAreaView!

<>
<SafeAreaView
   edges={["top"]}
   style={{ flex: 0, backgroundColor: "#0a2352" }}
/>
<SafeAreaView
   edges={["left", "right", "bottom"]}
   style={{
     flex: 1,
     backgroundColor: "#fff",
     position: "relative",
   }}
>
...
</SafeAreaView>
</>

Puede devolver varios SafeAreaViews de su método de render usando Fragmentcada uno de los cuales especifica independientemente su color de fondo:

render = () => (
  <Fragment>
    <SafeAreaView style={{ flex: 0.5, backgroundColor: "red" }} />
    <SafeAreaView style={{ flex: 0.5, backgroundColor: "blue" }} />
  </Fragment>
);

Resultado en un iPhone X:

ingrese la descripción de la imagen aquí

avatar de usuario
Hugo Bounoua

SOLUCIÓN: me encontré con este problema, pero no entiendo la lucha que tuvieron para resolverlo. La aplicación está en un contenedor que ocupa toda la pantalla. SafeAreaView envolverá la aplicación en un nuevo contenedor más pequeño. Así que agregue el estilo en el contenedor principal para que pueda tener el fondo que desea. Tan fácil como eso:

<View style={{flex:1, backgroundColor: "black"}}>
  <SafeAreaView style={{flex:1, backgroundColor: "white"}}>
    <App />
  </SafeAreaView>
</View>

Eso es todo, espero que ayude a algunos de ustedes;)

avatar de usuario
críticamente

<Fragment> no funciona correctamente en ningún dispositivo Android, así que para resolver el problema, pruebo esta solución y funciona tanto en Android como en iOS:

<SafeAreaView style={{ flex:1, backgroundColor: 'red' }}>
 <View style={{ flex: 1, backgroundColor: 'green' }} >
 <Text>Hello</Text>
 </View>
</SafeAreaView>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad