web-dev-qa-db-fra.com

Réagissez à la couleur d'arrière-plan SafeAreaView - Comment attribuer deux couleurs d'arrière-plan différentes au haut et au bas de l'écran

J'utilise SafeAreaView de React Native 0.50.1 et cela fonctionne plutôt bien, à l'exception de la seule partie. J'ai attribué la couleur d'arrière-plan orange à SafrAreaView mais je ne peux pas changer le fond de la zone non sécurisée du fond en noir.

Voici le code et j'ai inclus le résultat attendu et le résultat réel . Quel est le meilleur moyen de rendre la partie inférieure de l'écran noire au lieu d'être orange?

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

Je veux avoir le haut orange et le bas noir.

Mais ci-dessous est ce que je reçois maintenant.

react-nativeiphone-x
28
Ohsik

J'ai pu résoudre ce problème en utilisant une version des réponses de Yoshiki et Zach Schneider. Notez comment vous définissez le flex:0 du SafeAreaView supérieur pour qu'il ne se développe pas.

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

 enter image description here

26
Daniel M.

J'ai pu résoudre ce problème en utilisant un piratage absolu de la position. Voir le tweak suivant. Ce n’est pas du tout une preuve d’avenir, mais cela résout le problème que j’avais.

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

5
Aaron Cordova

J'ai rencontré le même problème et j'ai pu résoudre le problème suivant:

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

La outerWrapper applique la couleur de fond orange en haut. Le premier <SafeAreaView /> abaisse le second pour qu'il commence au début de la "zone de sécurité" (sous la barre d'état). Ensuite, la deuxième SafeAreaView occupe le reste de l’écran (y compris la zone «non sécurisée» inférieure) et lui donne la couleur de fond noire.

5
Zach Schneider

Vous pouvez renvoyer plusieurs SafeAreaViews à partir de votre méthode de rendu à l'aide de Fragment, chacun spécifiant indépendamment son backgroundColor:

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

Résultat sur un iPhone X:

 enter image description here

1
Yoshiki