如何在react native中挂载组件时对视图进行动画处理？

npm install react-native-reanimated react-native-gesture-handler

import React, { useRef } from 'react';
import { View, Animated, Button } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

const MyComponent = () => {
  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();
  };

  return (
    <View>
      <Animated.View
        style={{
          opacity: fadeAnim,
        }}
      >
        {/* Your content */}
      </Animated.View>
      <TouchableOpacity onPress={fadeIn}>
        <Button title="Fade In" onPress={fadeIn} />
      </TouchableOpacity>
      <TouchableOpacity onPress={fadeOut}>
        <Button title="Fade Out" onPress={fadeOut} />
      </TouchableOpacity>
    </View>
  );
};

import React from 'react';
import { View } from 'react-native';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <View>
      <MyComponent />
    </View>
  );
};

export default App;