React Native - 为什么我们对 Image 组件使用 tintColor 属性？

Question

当我使用tintColor属性时，它会将整个图像填充为我为tintColor属性指定的颜色。是我用错了还是它的工作和我得到的一样？谁能告诉这个属性用于<Image/>组件的目的是什么以及这个属性的正确用途是什么？一个小例子将更受欢迎。谢谢 ！！！

参考链接

Answer 1

根据文档，tintColor将所有非透明像素的颜色更改为 tintColor（逐字逐句）。

例如，在我的 React Native 包之一中，我使用了一个增量资产 - https://github.com/hannigand/react-native-ui-stepper/blob/master/assets/increment.png - 它有一个蓝色 + 符号。使用tintColor，另一个用户可以将蓝色（非透明像素）重新着色为他们想要的任何颜色。

Answer 2

使用tintColorin<Image>不起作用。

在使用它style的<Image>作品。

参考：https : //github.com/facebook/react-native/issues/17124

Answer 3

<Image
  tintColor='#2d3436'
  style={{width: 20, height: 15,margin:10}}
  source={{uri: 'backsignup'}}
/>

这适用于 android 但不适用于 ios

如果您希望它也能在 ios 上运行，请使用这个 ie。使用样式传递色调而不是将其作为道具传递

<Image
 style={{ width: 20,height: 23,margin: 10,tintColor: "#2d3436"}}
 source={{ uri: "pdficon" }}                                                 
/>

Answer 4

我认为这将消除您对图像的 twinColor 属性的困惑。

React Native 样式备忘单 - https://github.com/vhpoet/react-native-styling-cheat-sheet#image