react-native点击按钮动画打卡成功

在React Native中，如果你想要创建一个点击按钮后带有动画效果的打卡成功提示，可以借助第三方库如`react-native-easing`来添加动画，并结合`TouchableOpacity`或`TouchableHighlight`组件。这里是一个简单的步骤：

1. 首先，你需要安装所需的库，例如：

   npm install react-native-reanimated react-native-gesture-handler react-native-easing @react-native-community/masked-view

2. 然后，在你的组件中引入并导入相关的模块：

   import { Easing, TouchableOpacity } from 'react-native';
   import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
   import { MaskedView } from '@react-native-community/masked-view';

3. 创建一个布尔值共享状态表示是否打卡成功，以及动画相关的动画样式：

   const [isTapped, setIsTapped] = useSharedValue(false);
   const animatedStyles = useAnimatedStyle(() => ({
     opacity: isTapped.value ? 1 : 0,
     translateY: isTapped.value ? -50 : 0, // 根据需求调整动画高度
     animation: {
       duration: 300, // 动画持续时间
       easing: Easing.easeInOutBack, // 动画缓动函数
       toValue: isTapped.value ? 0 : 100, // 初始位置到结束位置
     },
   }));

4. 在`TouchableOpacity`或`TouchableHighlight`组件上设置点击事件处理程序，当点击时改变`isTapped`的状态并触发动画：

   <TouchableOpacity
     onPress={() => setIsTapped(!isTapped)}
     style={[
       styles.button,
       animatedStyles,
     ]}
   >
     <Text>打卡</Text>
   </TouchableOpacity>

   // 如果需要背景遮罩，添加MaskedView
   <MaskedView
     maskElement={<View style={{ height: 100, width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />}
     style={{
       position: 'absolute',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       justifyContent: 'center',
       alignItems: 'center',
     }}
   >
     <Text>{isTapped.value ? '已打卡' : '还未打卡'}</Text>
   </MaskedView>