如何在功能组件中编写Animated.Value.addListener？

在功能组件中编写Animated.Value.addListener的步骤如下：

首先，导入Animated模块：

import { Animated } from 'react-native';

在组件的构造函数中，创建一个Animated.Value实例，并将其赋值给组件的状态：

constructor(props) {
  super(props);
  this.animatedValue = new Animated.Value(0);
}

在组件的componentDidMount生命周期方法中，调用addListener方法来添加监听器：

componentDidMount() {
  this.animationListener = this.animatedValue.addListener(this.handleAnimation);
}

在组件的componentWillUnmount生命周期方法中，记得移除监听器：

componentWillUnmount() {
  this.animatedValue.removeListener(this.animationListener);
}

在组件中定义一个处理动画的回调函数handleAnimation，该函数会在动画值发生变化时被调用：

handleAnimation = (value) => {
  // 处理动画值的变化
  console.log(value);
}

完整的示例代码如下：

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

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(0);
  }

  componentDidMount() {
    this.animationListener = this.animatedValue.addListener(this.handleAnimation);
  }

  componentWillUnmount() {
    this.animatedValue.removeListener(this.animationListener);
  }

  handleAnimation = (value) => {
    // 处理动画值的变化
    console.log(value);
  }

  render() {
    return (
      // 组件的渲染内容
    );
  }
}

export default MyComponent;

在上述代码中，Animated.Value表示一个可动画的值，可以用于驱动各种动画效果。addListener方法用于添加一个监听器，当动画值发生变化时，监听器中的回调函数将被调用。在componentDidMount生命周期方法中添加监听器，在componentWillUnmount生命周期方法中移除监听器，以避免内存泄漏。

注意：上述示例代码中使用了React Native的Animated模块，适用于移动端开发。如果是Web端开发，可以使用react-native-web库来实现类似的效果。