我是相当新的React本地和复活，所以请忍受我，如果我不能解释这一点，因为我需要。
我有一个平面列表，动画一个单一的项目使用动画时点击。这工作很好，但问题是我试图使用它与代码使用reanimated和我得到了很多错误的一些原因？我以为它是向后兼容？
因为我需要的动画只运行在一个单一的项目，我不能使用重新动画的方式，它似乎很难保持跟踪一切？
下面的代码工作的代码，但如果我改变它重新动画，没有好.
有没有一种转换代码的方法，以正常运行时，使用重新动画或我只是要启动动画再次使用重新动画从头开始？
工作代码：-

import React, { useState, useEffect } from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Animated,
} from 'react-native';
import Constants from 'expo-constants';

const dummyData = [...Array(10)].map((_, i) => ({
  title: `title ${i}`,
  id: i,
}));

    const App = () => {
      const [Data, setData] = React.useState(dummyData);
      const [activeItem, setActiveItem] = React.useState(null);
    
      const animateValue = React.useRef(new Animated.Value(0)).current;
    
      renderItem = ({ item, index }) => {
        const animate = (index) => {
          setActiveItem(index);
    
          Animated.sequence([
            Animated.spring(animateValue, {
              toValue: 1,
            }),
            Animated.spring(animateValue, {
              toValue: 0,
            }),
          ]).start(() => console.log('animation finished'));
        };
    
        animationMap = animateValue.interpolate({
          inputRange: [0, 1],
          outputRange: [1, 1.5],
        });
    
        return (
          <TouchableOpacity onPress={(e) => animate(index)}>
            {activeItem === index && (
              <Animated.View
                style={[styles.button, { transform: [{ scale: animationMap }] }]}>
                <Text>{item.title}</Text>
              </Animated.View>
            )}
            {activeItem !== index && (
              <View style={styles.button}>
                <Text>{item.title}</Text>
              </View>
            )}
          </TouchableOpacity>
        );
      };
    
      return (
        <View style={styles.container}>
          <FlatList
            data={Data}
            renderItem={renderItem}
            keyExtractor={({ id }) => {
              return id;
            }}
            extraData={activeItem}
          />
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
      button: {
        padding: 10,
        borderWidth: 1,
        alignItems: 'center',
        backgroundColor: 'skyblue',
      },
    });
    
    export default App;

如果我将“已动画”从“已重新动画”更改为“已动画”，它将不起作用。

import {
  StatusBar,
  Text,
  View,
  StyleSheet,
  Image,
  Dimensions,
  TouchableOpacity,
  Platform,
  TouchableWithoutFeedback,
  UIManager,
  LayoutAnimation,
} from "react-native";

import { FlatList } from "react-native-gesture-handler";
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  SlideInDown,
  BounceOut,
  BounceIn,
  FadeIn,
  FadeOut,
  Easing,
  withSpring,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

或

import {
  StatusBar,
  Text,
  View,
  StyleSheet,
  Image,
  Dimensions,
  TouchableOpacity,
  Platform,
  TouchableWithoutFeedback,
  UIManager,
  LayoutAnimation,
  Animated,
} from "react-native";

import { FlatList } from "react-native-gesture-handler";
import {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  SlideInDown,
  BounceOut,
  BounceIn,
  FadeIn,
  FadeOut,
  Easing,
  withSpring,
  withRepeat,
  withTiming,
} from "react-native-reanimated";