平滑调整react-native按钮的大小

<Button
  style={{ width: 100, height: 50 }}
  title="按钮"
  onPress={() => {
    // 按钮点击事件处理逻辑
  }}
/>

import { Animated } from 'react-native';

class MyButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonSize: new Animated.Value(1), // 初始大小为1
    };
  }

  handlePressIn = () => {
    Animated.timing(this.state.buttonSize, {
      toValue: 0.8, // 缩小到原来的80%
      duration: 200, // 动画持续时间
      useNativeDriver: false, // 不使用原生驱动
    }).start();
  };

  handlePressOut = () => {
    Animated.timing(this.state.buttonSize, {
      toValue: 1, // 恢复到原始大小
      duration: 200, // 动画持续时间
      useNativeDriver: false, // 不使用原生驱动
    }).start();
  };

  render() {
    const { buttonSize } = this.state;
    const animatedStyle = {
      transform: [{ scale: buttonSize }],
    };

    return (
      <Animated.View style={animatedStyle}>
        <Button
          style={{ width: 100, height: 50 }}
          title="按钮"
          onPress={() => {
            // 按钮点击事件处理逻辑
          }}
          onPressIn={this.handlePressIn}
          onPressOut={this.handlePressOut}
        />
      </Animated.View>
    );
  }
}