如何在React Native中使用动画API同时隐藏页眉和页脚

import React, { useState, useEffect } from 'react';
import { Animated, View, Text } from 'react-native';

const HideHeaderFooter = () => {
  const [headerOpacity] = useState(new Animated.Value(1));
  const [footerOpacity] = useState(new Animated.Value(1));

  useEffect(() => {
    // 隐藏页眉和页脚的动画效果
    const hideAnimation = () => {
      Animated.parallel([
        Animated.timing(headerOpacity, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(footerOpacity, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true,
        }),
      ]).start();
    };

    // 显示页眉和页脚的动画效果
    const showAnimation = () => {
      Animated.parallel([
        Animated.timing(headerOpacity, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(footerOpacity, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
      ]).start();
    };

    // 监听页面滚动事件，根据滚动方向判断隐藏或显示页眉和页脚
    const handleScroll = (event) => {
      const currentOffset = event.nativeEvent.contentOffset.y;
      const direction = currentOffset > previousOffset ? 'down' : 'up';
      previousOffset = currentOffset;

      if (direction === 'down') {
        hideAnimation();
      } else {
        showAnimation();
      }
    };

    // 添加滚动事件监听
    // 例如：ScrollView组件的onScroll属性
    // 请根据实际情况进行调整
    // scrollViewRef为ScrollView组件的引用
    scrollViewRef.current.addEventListener('scroll', handleScroll);

    // 清除滚动事件监听
    return () => {
      scrollViewRef.current.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <View>
      <Animated.View style={{ opacity: headerOpacity }}>
        <Text>页眉内容</Text>
      </Animated.View>
      <ScrollView ref={scrollViewRef}>
        {/* 页面内容 */}
      </ScrollView>
      <Animated.View style={{ opacity: footerOpacity }}>
        <Text>页脚内容</Text>
      </Animated.View>
    </View>
  );
};

const App = () => {
  return (
    <View>
      {/* 其他组件 */}
      <HideHeaderFooter />
    </View>
  );
};