我只是想改变背景颜色从红色到绿色,但我一直得到以下错误。
这里是组件
import { View, Text, Image, StyleSheet } from "react-native";
import React, { useRef, useEffect } from "react";
import { Animated, Easing } from "react-native";
import { Keyframe } from "react-native-reanimated";
export default function Intro() {
const spinValue = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
const scaleValue = useRef(new Animated.Value(1)).current; // Initial value for opacity: 0
const opacityValue = useRef(new Animated.Value(1)).current;
const backgroundValue = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.sequence([
Animated.parallel([
Animated.timing(scaleValue, {
toValue: 0.9,
duration: 1000,
delay: 500,
useNativeDriver: true,
// easing: Easing.exp(),
}),
Animated.timing(spinValue, {
toValue: -0.05,
duration: 1000,
delay: 500,
useNativeDriver: true,
}),
]),
Animated.parallel([
Animated.timing(scaleValue, {
toValue: 5,
duration: 1000,
useNativeDriver: true,
easing: Easing.bezier(0.78, 0.27, 0.86, 0.34),
}),
Animated.timing(opacityValue, {
toValue: 0,
duration: 1000,
useNativeDriver: true,
}),
]),
]).start();
}, []);
const spinValueInter = spinValue.interpolate({
inputRange: [0, 100],
outputRange: ["0deg", "360deg"],
});
const backgroundValueInter = backgroundValue.interpolate({
inputRange: [0, 100],
outputRange: ["red", "green"],
});
function handleClick() {
Animated.timing(spinValue, {
toValue: 50,
duration: 1000,
useNativeDriver: true,
}).start();
Animated.timing(backgroundValue, {
toValue: 10,
duration: 1000,
useNativeDriver: true,
}).start();
}
return (
<Animated.View
style={[
styles.container,
{
backgroundColor: backgroundValueInter,
},
]}
>
<Animated.Image
style={[
styles.image,
{
transform: [{ rotate: spinValueInter }, { scale: scaleValue }],
opacity: opacityValue,
},
]}
source={require("../assets/intro-logo.png")}
/>
<Text onPress={handleClick}>Button</Text>
</Animated.View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
image: {
width: 150,
height: 150,
resizeMode: "contain",
},
});
尝试了一切……
期望得到改变背景颜色从红色到绿色
我只是在这里输入的东西,因为堆栈溢出是要求更多的细节,我不能解释的question任何比我已经深入
1条答案
按热度按时间643ylb081#
原来你必须关闭useNativeDriver,因为它不支持本机线程上的backgroundColor。s/o chat gpt以获取答案