设置后如何删除 Image 组件的 tintColor ？

Posted 2023-03-28

【中文标题】设置后如何删除 Image 组件的 tintColor ？

【英文标题】：How can I remove tintColor of Image component after setting it?

【发布时间】：2021-05-22 08:24:10

【问题描述】：

我正在为我的学士论文创建一个简单的应用程序，使用 React Native，我有这些 PNG 图像，用户可以四处移动。

图像还可以更改 tintColor，效果很好，并且从原始颜色开始。当我设置 tintColor 然后尝试再次“重置”它时，就会出现问题，然后图像就变得不可见了。

Image when it is added Image after changing to a color then to null again

正如您在下面的图片中看到的那样，图片仍然存在，只是不可见。

在样式中设置 tintColor 的代码如下所示：

             <Animated.Image
                    source=source
                    resizeMode='contain'
                    style=[
                        styles.item,
                        tintColor === null ?  :  tintColor: tintColor ,
                        
                            transform: [ scale: imgScale ],
                        ,
                    ]
                />

当图像加载时，值为 null，它不会设置任何 tintColor，但如果我设置 tintColor 然后返回 null，它只会完全删除上面的任何颜色。我尝试了不同的东西，但到目前为止没有任何效果。我希望用户能够“重置”回原始的 PNG 颜色，尤其是对于其中一些已经设置了自己颜色的颜色。

当我添加图片时，图片会从列表中动态加载，并且可以拖动。

【问题讨论】：

设置两个样式，styles.item 不带tintcolor 和styles.tintItem 带tinntcolor 然后使用条件在它们之间切换

嘿，感谢您的评论。我已经尝试过了，它没有用..因为我通过不同的组件设置了 tintColor（比如你可以在屏幕截图上看到的半圆形弹出菜单）。奇怪的是，当它第一次渲染并且 tintColor（作为一种状态）设置为 null 时，但是当它用新的色调重新渲染并返回 null 时，它是不可见的。我尝试为样式添加一个条件，但是我无法设置不同的颜色，我尝试使用您在上面看到的样式和 tintcondional 设置一个

【参考方案1】：

如果您不想重置，请给他们一个 key=Math.random。但是如果你想着色，你必须给他们一个静态键。 这将解决您的问题。

编辑：key=this.state.tintIt?Math.random:'a12'