Javascript 从布尔值更改淡入动画的背景色视图

我使用布尔值来确定视图的背景颜色

const selectColor = isSelected ? "#8bc34a" : "#e9e9e9";

...

<TouchableOpacity onPress={toggleSelection}>
 <View style={{ backgroundColor: selectColor }}>
 </View>
</TouchableOpacity>

const selectColor=isSelected？“#8bc34a”：“#e9e9e9”；
...

我希望此颜色开关使用

主要问题是，我的输入范围是一个布尔值

谢谢你的时间。

这是你想要的吗

可以设置

样式

对象的

不透明度

属性的动画。您有一个背景色为

#e9e9e9

的主

视图和一个嵌套的
动画视图。该视图的背景色为
#8bc34a
但不透明度最初为0，切换时，不透明度变为1，上面Gif的代码为：

class TestScreen extends Component {
    constructor(props) {
        super(props);

        this.opacity = new Animated.Value(0);

        this.toggleBackgroundColor = this.toggleBackgroundColor.bind(this);
    }

    toggleBackgroundColor() {
        Animated.timing(this.opacity, {
            toValue: this.opacity._value ? 0 : 1,
            duration: 1000
        }).start();
    }

    render() {
        return (
            <View
                style={{
                    flex: 1, justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#8BC34A'
                }}
            >
                <TouchableOpacity
                    style={{ borderWidth: 1, borderColor: '#4099FF', zIndex: 1 }}
                    onPress={this.toggleBackgroundColor}
                >
                    <Text style={{ fontSize: 18, color: '#4099FF', margin: 16 }}>
                        Toggle
                    </Text>
                </TouchableOpacity>
                <Animated.View
                    style={{
                        position: 'absolute',
                        left: 0, right: 0, bottom: 0, top: 0,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#E9E9E9',
                        opacity: this.opacity
                    }}
                />
            </View>
        );
    }
}

export default TestScreen;

class TestScreen扩展组件{
建造师（道具）{
超级（道具）；
this.opacity=新的动画.Value（0）；
this.toggleBackgroundColor=this.toggleBackgroundColor.bind（this）；
}
切换背景颜色（）{
动画。计时（此为不透明度{
toValue:this.opacity.\u值？0:1，
持续时间：1000
}).start（）；
}
render（）{
返回(
切换
);
}
}
导出默认测试屏幕；
这就是你想要的吗


可以设置
样式
对象的
不透明度
属性的动画。您有一个背景色为
#e9e9e9
的主
视图和一个嵌套的
动画视图。该视图的背景色为
#8bc34a
但不透明度最初为0，切换时，不透明度变为1，上面Gif的代码为：

class TestScreen extends Component {
    constructor(props) {
        super(props);

        this.opacity = new Animated.Value(0);

        this.toggleBackgroundColor = this.toggleBackgroundColor.bind(this);
    }

    toggleBackgroundColor() {
        Animated.timing(this.opacity, {
            toValue: this.opacity._value ? 0 : 1,
            duration: 1000
        }).start();
    }

    render() {
        return (
            <View
                style={{
                    flex: 1, justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#8BC34A'
                }}
            >
                <TouchableOpacity
                    style={{ borderWidth: 1, borderColor: '#4099FF', zIndex: 1 }}
                    onPress={this.toggleBackgroundColor}
                >
                    <Text style={{ fontSize: 18, color: '#4099FF', margin: 16 }}>
                        Toggle
                    </Text>
                </TouchableOpacity>
                <Animated.View
                    style={{
                        position: 'absolute',
                        left: 0, right: 0, bottom: 0, top: 0,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#E9E9E9',
                        opacity: this.opacity
                    }}
                />
            </View>
        );
    }
}

export default TestScreen;

class TestScreen扩展组件{
建造师（道具）{
超级（道具）；
this.opacity=新的动画.Value（0）；
this.toggleBackgroundColor=this.toggleBackgroundColor.bind（this）；
}
切换背景颜色（）{
动画。计时（此为不透明度{
toValue:this.opacity.\u值？0:1，
持续时间：1000
}).start（）；
}
render（）{
返回(
切换
);
}
}
导出默认测试屏幕；
可能使您的输入范围将两种颜色转换为整数？可能使您的输入范围将两种颜色转换为整数？将其用作动画值是一个很好的技巧。因此，例如，如何从红色变为绿色？如果您坚持使用不透明度属性，则似乎无法使用。使用动画值是一个很好的技巧。因此，例如，如何从红色变为绿色？如果您坚持使用“不透明度”属性，则似乎不能