动画不会在react native第一次点击时触发

Question

为什么我设置的动画效果在第一次点击时总是没有效果?react native中的refbinding动画的typescript是什么?

const Test = () => {
const messRef: any = React.useRef(new Animated.Value(0)).current;
const [show, setShow] = React.useState<boolean>(false);
return (
<View>
<Animated.Text
onPress={() => {
Animated.timing(messRef, {
toValue: show ? 200 : 0,
duration: 1000,
useNativeDriver: false,
}).start();
setShow(!show);
}}
style={{
color: messRef.interpolate({
inputRange: [0, 100],
outputRange: ["orange", "blue"],
}),
}}
>
Everything you do in life stems from either fear or love
</Animated.Text>
</View>
);
};

Answer 1

Issue is in

toValue: show ? 200 : 0,

show的第一次值将为false，当您第一次单击时toValue的value将再次为0。让它

toValue: !show ? 200 : 0,