推荐使用React Native Reanimated：打造流畅的动画与交互体验

import React from 'react';
import { Text, View } from 'react-native';
import { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
import { useSharedValue } from 'react-native-reanimated';
 
const App = () => {
  const visible = useSharedValue(true);
 
  const toggle = () => {
    visible.value = !visible.value;
  };
 
  return (
    <View>
      <Text onPress={toggle}>点击切换动画</Text>
      <FadeIn visible={visible}>
        <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
      </FadeIn>
      <FadeOut visible={visible}>
        <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
      </FadeOut>
    </View>
  );
};
 
export default App;

这个例子展示了如何使用React Native Reanimated中的FadeIn和FadeOut组件来创建一个简单的淡入淡出动画效果。代码中定义了一个toggle函数来改变visible的值，从而触发动画。这个例子简单易懂，适合作为React Native Reanimated库的入门教程。