React Native用tintColor改变图片颜色

7,562 阅读1分钟

需求

实现节日主题颜色配置,需要根据配置改变背景、字体、图片颜色,需要小程序和app(rn)端同步。

dropShadow

改变图片颜色,在css中可以使用dropShadow来实现:

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

tintColor

但是在react native中是不支持filter属性的, 难道只能通过换图片来实现,这样就不能两端共用一份配置了。 不死心看了下文档,发现image组件的style属性下面有个tintColor, 文档描述如下:

tintColor: color Changes the color of all the non-transparent pixels to the tintColor.

改变不透明像素的颜色,看起来正是我想要的,试一下果然可以!

<Image style={[styles.Icon, {tintColor: '#05a5d1'}]} source={Source}></Image>

兼容性

亲测在ios上是可以的,百度看有人说只支持ios,但官网文档上没有特别说明不支持安卓,如果有朋友试过安卓的效果可以评论告诉我,谢谢!