Le rendu de la zone de texte avec un fond transparent sur le dessus de l'image à Réagir Natif iOS

J'essaie de rendre un bloc avec du texte en blanc sur le dessus d'une image dans mes tests de Réagir Natif. Mais au lieu de cela, je reçois un bloc noir sur le dessus de mon image avec du texte blanc en elle. Pas ce que j'avais prévu. Comment rendre un bloc de texte avec un fond transparent?

Résultat courant

Fonction rendu

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

Feuille de style en fonction de

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

Attention, ceci est maintenant obsolète : "à l'Aide de <Image> avec les enfants est obsolète et sera une erreur dans le proche avenir. Veuillez revoir la mise en page ou d'utiliser <ImageBackground> à la place. "

InformationsquelleAutor Stefan Wallin | 2015-03-27

ios react-native

VEUILLEZ NOTER: Cette réponse est aujourd'hui largement dépassées. Cela était applicable le jour de Réagir Natif est open source de retour en 2015. Aujourd'hui, cette façon de faire cela est déconseillé.

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

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

Feuille de style en fonction de

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

styles.bienvenue n'est pas défini.
Faute de frappe, remplacé bienvenue avec le titre, qui a été définie.
De travail agréable. Merci beaucoup
à l'aide de <Image> avec les enfants est maintenant obsolète pour info...
Oui @blacksun, mais vous pouvez utiliser ImageBackground dont j'ai déjà utilisé et fonctionne bien
Essayer ce qui a entraîné une erreur: Le <Image> composant ne peut pas contenir des enfants.

InformationsquelleAutor Stefan Wallin

9

backgroundColor: 'transparent'
C'est vraiment une optimisation de la performance et il est plutôt agressif.

"< Texte > éléments héritent de la couleur d'arrière-plan de leur parent < Affichage > mais ce comportement provoque plus de l'agacement qui permet, à mon avis. Un exemple simple est un < Image > avec imbriqué < Texte >. Les nœuds de texte prendra la couleur d'arrière-plan ou le parent de la vue sur la place et permet de masquer l'image. Ensuite, nous avons la backgroundColor: 'transparent' sur les nœuds de texte pour le corriger.

Ce comportement ne se produit pas sur Android, le < Texte > nœuds de toujours avoir un fond transparent par défaut. Cela provoque un peu de surprises lors de l'élaboration de quelque chose sur Android puis de le tester sur iOS." - https://github.com/janicduplessis

C'est à partir d'une discussion où les utilisateurs soulevé la question comme un problème. Lire la suite ici - https://github.com/facebook/react-native/issues/7964

La façon la plus simple comme Colin dit ci-dessus est de définir la backgroundColor du conteneur à rgba(0,0,0,0)

InformationsquelleAutor user632905
7

En interne, je vois que Réagir Natif de ne traduire les valeurs alpha et le cas particulier de transparent dans la bonne UIColor avec des valeurs alpha, de sorte que l'aspect de ce travail est qu'il est facile de valider expérimentalement.

Notez que si vous définissez la backgroundColor de votre conteneur transparent (ou rgba(0,0,0,0)), vous obtenez également un transparent bloc de texte - que la connaissance devrait vous aider à contourner ce problème. Cependant, je pense qu'il est possible d'interpréter ceci comme un bug puisque ce n'est pas le comportement que l'on pourrait attendre, il se sent comme une sorte d'empilement de problème.

InformationsquelleAutor Colin Ramsay
2

Je viens de tomber sur le même problème. Essayez de supprimer backgroundColor: '#000000', de votre contenant les styles. Je ne sais pas pourquoi, mais la couleur de fond du composant de niveau supérieur semble être utilisé dans ce cas.

InformationsquelleAutor af__

Vous devez vous connecter pour publier un commentaire.