react native - react - Reaccione el color de fondo nativo de SafeAreaView: ¿Cómo asignar dos colores de fondo diferentes para la parte superior e inferior de la pantalla?

safe area react native

Question

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

Aquí está el código y he incluido 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 top naranja y fondo negro.

Pero a continuación es lo que obtengo ahora.

Answer 1

Acabo de encontrar el mismo problema, tenemos una barra de navegación en la parte superior y una barra de pestañas en la parte inferior con dos colores de fondo diferentes.

Mi solución fue envolver el componente de la barra de pestañas en un SafeAreaView con el color de fondo correcto, junto con el componente de la barra de navegación con su propio SafeAreaView con su color de fondo.

return (
  <SafeAreaView style={{ backgroundColor: ''white'' }}>
    <Animated.View style={heightAnim}>
      {...navBarComponentStuff}
    </Animated.View>
  </SafeAreaView>)

Para la barra de navegación

Y esto para la barra de pestañas:

<SafeAreaView style={this.props.tabBarStyle}> //Some dark grey color is passed here
  <Animated.View style={heightAnim}>
    {tabBarItems.map(render tabs.....}
  </Animated.View>
</SafeAreaView>}

Entonces, dicho esto, usted podría envolver su componente de navegación en un SafeAreaView con el color naranja establecido con estilo, y envolver su contenido principal en otro SafeAreaView con negro como el estilo de fondo de color, o cualquier color que haya elegido.

Una cosa que debe saber, si agrega dos SafeAreaView en el mismo componente como:

return (
  <View style={styles.container}>
    <SafeAreaView style={{ backgroundColor: ''white'' }}>
      <NavigationBarComponent />
    </SafeAreaView>
    <SafeAreaView style={this.props.tabBarStyle}>
      <Animated.View style={heightAnim}>
        <Animated.View style={[styles.tabBar, this.props.tabBarStyle]}>
          {map and render tabs}
        </Animated.View>
      </Animated.View>
    </SafeAreaView>
  </View>
);

Combinará los dos SafeAreaView ''s, o al menos eso es lo que me pareció, quizás alguien con más experiencia con esto pueda explicar lo que sucede en esta situación.

Esto empujó mi barra de pestañas a la parte superior de la pantalla y estableció el color de fondo en blanco cuando hice esto.

Pero mover la parte superior de SafeAreaVeiw en NavigationBarComponent me dio el efecto deseado.

Para aquellos que puedan estar interesados, y tal vez esta es la razón por la que actuó de forma extraña con dos de ellos en la misma vista, los AnimatedView son porque a veces ocultamos las barras de navegación y de pestañas.

Answer 2

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

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

Answer 3

Pude resolver esto mediante el uso de algún hacking de posición absoluta. Ver el siguiente tweak. No es una prueba de futuro 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,
  }
})

Answer 4

Pude resolver esto usando una versión de las respuestas de Yoshiki y Zach Schneider. Observe cómo configura la parte superior de flex:0 de 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>
  );
}

Answer 5

Puede devolver múltiples SafeAreaView s desde su método de renderizado utilizando Fragment , cada uno de los cuales especifica de forma independiente su SafeAreaView de fondo:

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

Resultado en un iPhone X:

Answer 6

• Tal vez fue de ayuda, probé la solución para esta consulta, pero el enfoque a continuación fue el mejor para mi caso.

• Pocas vistas / contenedores tenían una imagen de fondo.

• En mi caso, decidí utilizar el tamaño de la pantalla del iPhone x.

• La aplicación fue diseñada para el modo retrato solamente.

• Detectó el dispositivo y para el iPhone X acaba de ajustar los elementos superior e inferior.

• Este enfoque ayudó a mantener el tema de la aplicación y la utilización de una pantalla completa del iPhone X.

  isIPhoneX = () => {
          const X_HEIGHT = 812, X_WIDTH = 375;
          const {"height": D_HEIGHT, "width": D_WIDTH} = Dimensions.get("window");
  
          return Platform.OS === "ios" &&
            (D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH ||
              D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT);
  
      }