Rendering casella di testo con sfondo trasparente sopra l'immagine in React Native iOS

Question

Sto provando a eseguire il rendering di un blocco con testo bianco sopra un'immagine nei miei test di React Native. Ma invece ho un blocco nero sopra la mia immagine con testo bianco. Non quello che mi aspettavo. Come si esegue il rendering di un blocco di testo con sfondo trasparente?

risultato attuale

Render Funzione

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

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

Answer 1

NOTA BENE: Questa risposta è ora ampiamente obsoleta. Questo era applicabile il giorno in cui React Native era stato aperto nel 2015. Oggi questo modo di procedere è deprecato.

---

---

---

È possibile raggiungere questo obiettivo con l'aggiunta di un View all'interno del Image in questo modo:

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

funzione di stile

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

Answer 2

Internamente, vedo che React Native traduce i valori alfa e il caso speciale di transparent nel colore UIC corretto con valori alfa, quindi l'aspetto di ciò funziona ed è facile convalidarlo in modo sperimentale.

Si noti che se si imposta la backgroundColor del contenitore per transparent (o rgba(0,0,0,0)), si ottiene anche un blocco di testo trasparente - che la conoscenza dovrebbe aiutare a risolvere questo problema. Comunque penso che sia possibile interpretarlo come un bug dato che questo non è il comportamento che ci si aspetterebbe, sembra una specie di problema di stacking.

Answer 3

Ho appena avuto lo stesso problema. Prova a rimuovere backgroundColor: '#000000', dagli stili del contenitore. Non so perché, ma in questo caso il colore di sfondo del componente di primo livello sembra essere usato.

Answer 4

backgroundColor: 'transparent' Questo in realtà è un ottimizzazione delle prestazioni ed è piuttosto aggressivo.

"< testo> elementi ereditano il colore del loro genitore < Visualizza> sfondo ma questo comportamento provoca più fastidio che aiuta a mio parere. Un semplice esempio è un < Immagine> con nidificato < Testo >.I nodi di testo assumeranno invece il colore di sfondo o le viste parent e nasconderanno l'immagine, quindi dobbiamo impostare backgroundColor: 'transparent' sui nodi di testo per correggerlo.

Questo comportamento non si verifica anche su Android, il < Testo> nodi hanno sempre uno sfondo trasparente per impostazione predefinita. Questo fa sì che qualche sorpresa quando si sviluppa qualcosa su Android poi testarlo su iOS "-. https://github.com/janicduplessis

Questo è da una discussione in cui gli utenti hanno sollevato come un problema saperne di più qui -. https://github.com/facebook/react-native/issues/7964

Il modo più semplice come Colin detto sopra è quello di impostare il backgroundColor del contenitore per RGBA (0,0,0,0)