0

这是我为学习 Reanimated 2 而创建的一个简单应用程序，其中屏幕中间有一个蓝点。当用户按下它时，它会变大变黄，还有“YOLO！”字样。会出现在里面。

但是，我面临的错误是，当点达到其最大尺寸时，即使用户不再按下它，点也会保持黄色并且尺寸相同。用户必须再次按下它才能返回其默认状态。

在用户不再按下它之后，如何使点返回其默认状态，即它是蓝色的并且不再出现“YOLO”这个词？

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Animated, {useSharedValue, useAnimatedStyle, useAnimatedGestureHandler, withSpring} from 'react-native-reanimated';
import {TapGestureHandler} from 'react-native-gesture-handler';

const AnimatedDot = () =>{
const pressed = useSharedValue(false);

const eventHandle = useAnimatedGestureHandler({
onStart:(event, ctx) =>{
    pressed.value = true;
},
onEnd: (event, ctx) =>{
    pressed.value = false;
}
})

const uas = useAnimatedStyle(()=>{
return{
backgroundColor: withSpring(pressed.value ? '#FEEF86' : '#001972'),
transform: [{scale: withSpring(pressed.value ? 1.5 : 1 )}],
}
})

const yoloText = useAnimatedStyle (() =>{
return{
    opacity: withSpring(pressed.value ? 1.0 : 0.0),
}
})

return(
<View style = {styles.container}>
{/* TapGestureHandler tells the program that the wrapped components are interactive */}
<TapGestureHandler onGestureEvent = {eventHandle} >
    <Animated.View style = {[styles.ball, uas]} >
        <Animated.Text style = {[styles.message, yoloText]}>YOLO!</Animated.Text>
    </Animated.View>
</TapGestureHandler>
</View>
)
}

const styles = StyleSheet.create({
container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
},
ball:{
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: '#001972',
    alignItems: 'center',
    justifyContent: 'center',

},
message:{
    fontWeight: 'bold',
    fontSize: 25,
    color: '#000',
},

})

export default AnimatedDot;
4

0 回答 0