如何在每次onPress事件(或状态改变)时淡入？

import React, { Component } from 'react';
import { View, Animated, TouchableOpacity } from 'react-native';

class FadeInButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0), // 初始透明度为0
    };
  }

  handlePress = () => {
    Animated.timing(
      this.state.fadeAnim,
      {
        toValue: 1, // 目标透明度为1
        duration: 1000, // 动画持续时间为1秒
      }
    ).start();
  }

  render() {
    const { fadeAnim } = this.state;

    return (
      <TouchableOpacity onPress={this.handlePress}>
        <Animated.View
          style={{
            opacity: fadeAnim.interpolate({
              inputRange: [0, 1],
              outputRange: [0, 1],
            }),
          }}
        >
          {/* 在这里放置你的按钮内容 */}
        </Animated.View>
      </TouchableOpacity>
    );
  }
}

export default FadeInButton;