new - react native run ios

Renderizar cuadro de texto con fondo transparente en la parte superior de la imagen en React Native iOS

Question

Intento renderizar un bloque con texto blanco sobre una imagen en mi prueba de React Native. Pero en su lugar aparece un bloque negro en la parte superior de mi imagen con texto blanco. No es lo que esperaba. ¿Cómo renderizas un bloque de texto con fondo transparente?

Resultado actual

Función de renderizado

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

Función de hoja de estilo

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

Internamente, veo que React Native convierte los valores alfa y el caso especial de transparent en el UIColor correcto con valores alfa, por lo que ese aspecto funciona y es fácil validarlo experimentalmente.

Tenga en cuenta que si establece backgroundColor de su contenedor en transparent (o rgba(0,0,0,0) ), también obtendrá un bloque de texto transparente, ese conocimiento debería ayudarlo a evitar este problema. Sin embargo, creo que es posible interpretar esto como un error, ya que ese no es el comportamiento que cabría esperar, se siente como un problema de apilamiento.

Answer 2

Me encontré con el mismo problema. Intente eliminar backgroundColor: ''#000000'', de sus estilos de contenedor. No estoy seguro de por qué, pero el color de fondo del componente de nivel superior parece usarse en este caso.

Answer 3

TENGA EN CUENTA: Esta respuesta está ahora muy desactualizada. Esto fue aplicable el día en que React Native fue abierto en 2015. Hoy en día, esta forma de hacerlo está obsoleta.

Puede lograr esto agregando una View dentro de la Image manera:

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

Función de hoja de estilo

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 4

backgroundColor: ''transparent'' Esto en realidad es una optimización del rendimiento y es bastante agresivo.

Los elementos " <Text> heredan el color de fondo de su elemento primario <View>, pero este comportamiento causa más molestia que, en mi opinión, ayuda. Un ejemplo simple es una <Image> con <Text> anidado. Los nodos de texto tomarán el color de fondo o el padre ve en su lugar y ocultará la imagen. Luego tenemos que establecer backgroundColor: ''transparent'' en los nodos de texto para arreglarlo.

Este comportamiento tampoco ocurre en Android, los nodos <Text> siempre tienen un fondo transparente por defecto. Esto causa algunas sorpresas cuando se desarrolla algo en Android y luego se prueba en iOS. "- https://github.com/janicduplessis

Esto es de una discusión donde los usuarios lo plantearon como un problema. Léelo más aquí - https://github.com/facebook/react-native/issues/7964

La manera más fácil como dijo Colin arriba es establecer el backgroundColor del contenedor en rgba (0,0,0,0)