React native 的 tintColor 问题答案

【问题标题】：Problems with React native's tintColorReact native 的 tintColor 问题
【发布时间】：2021-10-25 11:18:23
【问题描述】：

我对 React Native 非常陌生，并且遇到了一个问题，当我想为图像的色调设置动画时会出现问题。我希望颜色会随着时间的推移逐渐变化，就像 Animated.Timing 应该实现的那样，但它只执行动画的第一帧然后冻结。但是，由于某种原因，当我将“tintColor”更改为“backgroundColor”时，动画效果很好。

这是我的代码：

import React from 'react';
import { useState } from 'react';
import { Text, View, TouchableHighlight, Dimensions, Component, Image, Animated } from 'react-native';
import PropTypes from 'prop-types';

function RGBtoCSS(rgb) {
    return "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
}

class MyImage extends React.Component {
    constructor(props) {
        super(props);
        this.anim = new Animated.Value(0);
        this.animate();
    }

    animate() {
        this.props.onPress();

        Animated.timing(
            this.anim,
            {
                toValue: 1,
                duration: 500,
                useNativeDriver: false
            }
        ).start();
    }

    render() {
        var style = {
            width: 500,
            height: 500,
            resizeMode: 'stretch'
        };

        var col = this.anim.interpolate(
        {
            inputRange: [0, 1],
            outputRange: [RGBtoCSS([0, 0, 0]), RGBtoCSS([140, 74, 140])]
        });

        return (
            <Animated.Image source={this.props.img} style={{ ...style, tintColor: col }} />
        );
    }
}
MyImage.propTypes = { img: PropTypes.string.isRequired, onPress: PropTypes.func.isRequired, spacing: PropTypes.number.isRequired };

export default function App() {
    return (
        <View style={{
            flex: 1,
            backgroundColor: RGBtoCSS([255, 255, 255])
        }}>
            <MyImage img={{ uri: 'https://img.icons8.com/color/452/google-logo.png' }} onPress={() => { }} spacing={0} />
        </View>
    );
}

（可在https://snack.expo.dev/v0GeiLbOP 获取演示）

【问题讨论】：

好像tintColor 是不可动画的。
有动画替代方案吗？
您是否尝试记录RGBtoCSS 函数以查看计算了哪些值？可能是 interpolate 不能很好地与您的函数配合使用。
背景颜色可以正常工作，所以我认为不是问题
我已经试过了

标签： javascript reactjs react-native expo react-animated

【解决方案1】：

我找到了解决方法。您可以将两个<Animated.Image> 堆叠在一起，第一个图像是最终颜色，第二个图像是起始颜色。然后您可以使用opacity 在这两个图像之间创建一个淡入淡出效果，这也适用于interpolate。

import React from 'react';
import { useState } from 'react';
import { Text, View, TouchableHighlight, Dimensions, Component, Image, Animated } from 'react-native';
import PropTypes from 'prop-types';

function RGBtoCSS(rgb) {
    return "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] +")";
}

class MyImage extends React.Component {
    constructor(props) {
        super(props);
        this.anim = new Animated.Value(0);
        this.animate();
    }

    animate() {
        this.props.onPress();
        console.log(this.anim)

        Animated.timing(
            this.anim,
            {
                toValue: 1,
                duration: 500,
                useNativeDriver: false
            }
        ).start();
    }

    render() {
        var style = {
            width: 500,
            height: 500,
            resizeMode: 'stretch'
        };

        var col = this.anim.interpolate(
        {
            inputRange: [0, 1], 
            outputRange: [1, 0]
        });


    
        return (
          <View>
            <Animated.Image source={this.props.img} style={{ ...style,tintColor: RGBtoCSS([140, 74, 140]) }} />
            <Animated.Image source={this.props.img} style={{ ...style, opacity:col, transform:[{translateY:"-100%"}],  tintColor: RGBtoCSS([0, 0, 0]) }} />
            </View>
        );
    }

}
MyImage.propTypes = { img: PropTypes.string.isRequired, onPress: PropTypes.func.isRequired, spacing: PropTypes.number.isRequired };

export default function App() {
    return (
        <View style={{
            flex: 1,
            backgroundColor: RGBtoCSS([255, 255, 255])
        }}>
            <MyImage img={{ uri: 'https://img.icons8.com/color/452/google-logo.png' }} onPress={() => { }} spacing={0} />
        </View>
    );
}

小吃 - https://snack.expo.dev/ZYulbKh3g

【讨论】：