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

Question

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

Reference link

Answer 1

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

React Native 样式作弊 Sheet - https://github.com/vhpoet/react-native-styling-cheat-sheet#image

Answer 2

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

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

Answer 3

在 <Image> 中使用 tintColor 无效。

在 <Image> 的 style 中使用它是有效的。

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

Answer 4

<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" }}                                                 
/>

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

React Native - Why we use the tintColor property for Image component?

android

tintcolor

ios

reactjs

react-native