在 React Native 中使图像变暗

如何解决在 React Native 中使图像变暗

在 React Native 中使图像变暗。

我想要的：我想让我的图像看起来更暗，我不想用 photoshop 或类似的东西来做。

目前的研究： 一些建议是使用 backgroundColor：“rgba(0,0.5)”，但这不起作用，因为我没有使用 imagebackground。我也看到使用了 Opacity 道具，但这不适用于我的场景。

我得到的最接近的是 tintColor，但我无法使用道具更改其不透明度，RGBA 也不起作用。

图片：（我想让我的白色文字更流行！）

小代码片段：

{/* 图片 */}

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

解决方法

您可以降低图像的不透明度并将其包装在黑色容器中。

这不是在照片编辑方式中变暗，在那里你会保持更亮的白色。这是简单的渐变到黑色。

div {
  display: inline-block;
  background: black;
}

img {
  opacity: .6
}

<div>
 <img src="https://www.placecage.com/320/200"/>
</div>

,

我建议尝试应用 CSS 过滤规则。 Brightness 是我认为您会想要的。我确实知道一些 CSS 规则在 React-Native 中的支持有限。

img.darker {
  filter: brightness(50%);
}

<img src="https://picsum.photos/200/300"/>
<img class="darker" src="https://picsum.photos/200/300"/>

这是一个 Expo Snack，但是，在本机方面似乎效果不佳，因此您可能需要求助于使用叠加或类似方法。