Hacemos una revisión profunda cada escrito de nuestro sitio web con el objetivo de mostrarte siempre información certera y actualizada.
Solución:
TENGA EN CUENTA: Esta respuesta ahora está muy desactualizada. Esto fue aplicable el día en que React Native se abrió en 2015. Hoy en día, esta forma de hacer esto está obsoleta.
“El uso con niños está obsoleto y será un error en el futuro cercano. Por favor, reconsidere el diseño o utilícelo en su lugar”.
Consulte los documentos https://reactnative.dev/docs/images#background-image-via-nesting
Puede lograr esto agregando un View dentro de Image al igual que:
render: function(){
return (
Headline
);
)
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'
);
backgroundColor: ‘transparente’
En realidad, se trata de una optimización del rendimiento y es bastante agresiva.
“< Text > los elementos heredan el color de fondo de su padre < View > pero este comportamiento causa más molestia que ayuda en mi opinión. Un ejemplo simple es un < Image > con anidado < Text >. Los nodos de texto tomarán el color de fondo o las vistas principales y ocultarán la imagen. Entonces tenemos que configurar backgroundColor: ‘transparente’ en los nodos de texto para arreglarlo.
Este comportamiento tampoco ocurre en Android, el < Text > los nodos siempre tienen un fondo transparente por defecto. Esto causa algunas sorpresas al desarrollar algo en Android y luego probarlo en iOS “. – https://github.com/janicduplessis
Esto es de una discusión donde los usuarios lo plantearon como un problema. Léalo más aquí: https://github.com/facebook/react-native/issues/7964
La forma más fácil, como dijo Colin anteriormente, es configurar el color de fondo del contenedor a rgba (0,0,0,0)
Internamente, veo que React Native traduce valores alfa y el caso especial de transparent en el UIColor correcto con valores alfa, por lo que ese aspecto de esto funciona y es fácil de validar esto experimentalmente.
Tenga en cuenta que si establece el backgroundColor de su contenedor a transparent (o rgba(0,0,0,0)), también obtiene un bloque de texto transparente; ese conocimiento debería ayudarlo a solucionar este problema. Sin embargo, creo que es posible interpretar esto como un error, ya que ese no es el comportamiento que uno esperaría, se siente como una especie de problema de apilamiento.