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

No olvides que en las ciencias un error casi siempere puede tener varias resoluciones, así que aquí te compartiremos lo más óptimo y eficiente.

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 (
    
      
      
        
      
    
  );

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

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 ) => (
  
    

    
      content
    
  
);

los outerWrapper aplica el color de fondo naranja en la parte superior. El primero 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.

Puedes ayudar nuestro análisis fijando un comentario y dejando una puntuación te lo agradecemos.

---

---

Utiliza Nuestro Buscador