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

The image I want to darken

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>
0
jrs 26 feb. 2021 a las 23:05

2 respuestas

La mejor respuesta

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>
1
Creaforge 26 feb. 2021 a las 20:51

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.

0
Drew Reese 26 feb. 2021 a las 21:39