如何在reactnative中使用动画在单击时将组件展开为全屏宽度和高度

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

const ExpandableComponent = () => {
  const [expanded, setExpanded] = useState(false);
  const animation = useRef(new Animated.Value(0)).current;
  
  const handlePress = () => {
    if (expanded) {
      // 缩小动画
      Animated.timing(animation, {
        toValue: 0,
        duration: 300,
        useNativeDriver: false,
      }).start();
    } else {
      // 展开动画
      Animated.timing(animation, {
        toValue: 1,
        duration: 300,
        useNativeDriver: false,
      }).start();
    }
    
    setExpanded(!expanded);
  };
  
  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity onPress={handlePress}>
        <View style={{ height: 50, backgroundColor: 'blue' }} />
      </TouchableOpacity>
      
      <Animated.View
        style={{
          flex: 1,
          width: animation.interpolate({
            inputRange: [0, 1],
            outputRange: ['0%', '100%'],
          }),
          height: animation.interpolate({
            inputRange: [0, 1],
            outputRange: ['0%', '100%'],
          }),
          backgroundColor: 'red',
        }}
      />
    </View>
  );
};

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <ExpandableComponent />
    </View>
  );
};