如何在带有zindex的reactnative中动画fadein fadeout？

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

const FadeInFadeOut = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  useEffect(() => {
    fadeIn();

    // 清除动画
    return () => fadeOut();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        style={{
          opacity: fadeAnim,
          zIndex: 1, // 设置 zIndex 使组件处于顶层
        }}
      >
        <Text style={{ fontSize: 20 }}>Fade In Fade Out Animation</Text>
      </Animated.View>

      <TouchableOpacity onPress={fadeOut}>
        <View style={{ backgroundColor: '#ff0000', padding: 10, marginTop: 10 }}>
          <Text style={{ color: '#ffffff' }}>Fade Out</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default FadeInFadeOut;