Oscurece una imagen en React Native.
Lo que quiero: quiero que mi imagen parezca más oscura, no quiero hacerlo con Photoshop ni nada por el estilo.
Investigación hasta ahora: Algunas sugerencias fueron utilizar backgroundColor: "rgba (0,0,0,0.5)", pero eso no funciona porque no estoy usando ImageBackground. También he visto que se usa el accesorio Opacity, pero eso no funciona para mi escenario.
Lo más cercano que obtuve fue tintColor, pero no pude cambiar la opacidad en eso con el accesorio y RGBA tampoco funcionó.
La imagen: (¡quiero que mi texto blanco resalte más!)
Fragmento de código pequeño:
{/ * Imagen * /}
<View style={styles.workoutImageContainer}> <Image source={item.photo} resizeMode="cover" style={styles.workoutImage} /> <View style={styles.workoutTitleContainer}> <Text style={styles.workoutTitle}>{item.name}</Text> </View> </View> </TouchableOpacity>
2 respuestas
Puede reducir la opacidad de la imagen y envolverla en un recipiente negro.
Esto no se está oscureciendo en una forma de edición de fotos, donde mantendría blancos más brillantes. Esto es simple desvanecimiento a negro.
div {
display: inline-block;
background: black;
}
img {
opacity: .6
}<div>
<img src="https://www.placecage.com/320/200"/>
</div>Sugiero intentar aplicar una regla de filtro CSS. Brillo es el que creo que le gustaría. Sin embargo, sé que algunas reglas de CSS tienen soporte limitado en React-Native.
img.darker {
filter: brightness(50%);
}<img src="https://picsum.photos/200/300"/>
<img class="darker" src="https://picsum.photos/200/300"/>Aquí tienes un refrigerio de la Expo, pero sí, parece que no funciona tan bien en el lado nativo, por lo que es probable que deba recurrir al uso de una superposición o un enfoque similar.