web-dev-qa-db-fra.com

Rendu de la zone de texte avec un arrière-plan transparent au-dessus de l'image dans React Natif iOS

J'essaie de rendre un bloc avec du texte blanc au-dessus d'une image dans mon test de React Natif. Mais au lieu de cela, je reçois un bloc noir au-dessus de mon image avec du texte blanc. Ce n'est pas ce à quoi je m'attendais. Comment rendre un bloc de texte avec un fond transparent?

Résultat actuel

enter image description here

fonction de rend

render: function(){
  return (
    <View style={styles.container}>
      <Image 
        style={styles.backdrop} 
        source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
          <Text style={styles.headline}>Headline</Text>
      </Image>
    </View>
  );
)

Fonction Stylesheet

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#000000',
    width: 320
  },
  backdrop: {
    paddingTop: 60,
    width: 320,
    height: 120
  },
  headline: {
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: 'white'
  }
});
iosreact-native
33
Stefan Wallin

S'IL VOUS PLAÎT NOTE: Cette réponse est maintenant largement obsolète. Ceci était applicable le jour React Native a été open source depuis 2015. Aujourd'hui, cette façon de faire est déconseillée. =

Vous pouvez accomplir cela en ajoutant un View à l'intérieur de Image comme ceci:

render: function(){
  return (
    <View style={styles.container}>
      <Image 
        style={styles.backdrop} 
        source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
          <View style={styles.backdropView}>
            <Text style={styles.headline}>Headline</Text>
          </View>
      </Image>
    </View>
  );
)

Fonction Stylesheet

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#000000',
    width: 320
  },
  backdrop: {
    paddingTop: 60,
    width: 320,
    height: 120
  },
  backdropView: {
    height: 120,
    width: 320,
    backgroundColor: 'rgba(0,0,0,0)',
  },
  headline: {
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: 'white'
  }
});
53
Stefan Wallin

backgroundColor: 'transparent' Il s'agit en réalité d'une optimisation de la performance, plutôt agressive.

" <Text> les éléments héritent de la couleur d'arrière-plan de leur parent <View> mais ce comportement provoque plus de désagréments qui aident à mon avis. <Image> avec imbriqué <Texte>. Les nœuds de texte prendront à la place la couleur de l'arrière-plan ou les vues parent et masqueront l'image. définir backgroundColor: 'transparent' sur les nœuds de texte pour le corriger.

Ce comportement ne se produit pas non plus sur Android, les nœuds <Texte> ont toujours un arrière-plan transparent par défaut. Cela provoque quelques surprises lors du développement de quelque chose sur Android puis le teste sur iOS. "- https://github.com/janicduplessis

Cela provient d'une discussion où les utilisateurs ont soulevé le problème. Lisez la suite ici - https://github.com/facebook/react-native/issues/7964

La manière la plus simple, comme Colin l’a dit plus haut, est de régler le backgroundColor du conteneur sur rgba (0,0,0 , 0)

8
user632905

En interne, je vois que React Native traduit les valeurs alpha et le cas spécial de transparent dans la bonne valeur UIColor avec les valeurs alpha. Cet aspect fonctionne donc, et il est facile validez ceci expérimentalement.

Notez que si vous définissez backgroundColor de votre conteneur sur transparent (ou rgba(0,0,0,0)), vous obtenez également un bloc de texte transparent - cette connaissance devrait vous aider à résoudre ce problème. . Cependant, je pense qu'il est possible d'interpréter cela comme un bogue, car ce n'est pas le comportement auquel on pourrait s'attendre, cela ressemble à une sorte de problème d'empilement.

7
Colin Ramsay

Je viens de rencontrer le même problème. Essayez de retirer backgroundColor: '#000000', de vos styles de conteneur. Vous ne savez pas pourquoi, mais la couleur de fond du composant de niveau supérieur semble être utilisée dans ce cas.

2
af__