ReactNative 事件监听

在React Native中，你可以使用Animated库来监听动画的状态，或者使用PanResponder来监听触摸事件。如果你想监听普通的点击或触摸事件，可以使用TouchableOpacity或TouchableHighlight组件，它们内部已经处理了触摸事件的监听。

以下是一个使用Animated来监听动画状态的例子：

import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';
 
const App = () => {
  const animatedValue = useRef(new Animated.Value(0)).current;
 
  useEffect(() => {
    const subscription = animatedValue.addListener(value => {
      console.log(value);
    });
    return () => {
      animatedValue.removeListener(subscription);
    };
  }, [animatedValue]);
 
  return (
    <View>
      <Animated.View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'blue',
          transform: [
            {
              translateX: animatedValue,
            },
          ],
        }}
      />
      <Text>Move the blue box!</Text>
    </View>
  );
};
 
export default App;

在这个例子中，我们创建了一个Animated.Value，它跟踪了动画的当前位置。我们使用useEffect来设置监听器，当动画值变化时，我们打印出来。记得在组件卸载时移除监听器以避免内存泄漏。