在滚动本机后如何在FlatList中缩放可见性视图？

Question

我对动画API和平面列表没什么问题，

我只想为视图列表中的一个设置动画，以便当该视图可见时，我会调用X和Y，但其他视图也都在调用，

那么我该如何处理它以缩放可见视图？

这是viewableItems日志记录，如何使用它来帮助动画制作？因为我的大脑已经停止工作了：）

录制的屏幕可以实现我的想法！

screen record

Snack

这是我想要实现的最终结果

Look here's Gif

这是我的代码段

import React, {Component} from 'react';
import {Animated, Easing, FlatList} from 'react-native';
import PopularFood from '../../components/PopularFood';

class MenuScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      animatedValue: new Animated.Value(0),
    };
  }
  handleAnimation = () => {
    Animated.timing(this.state.animatedValue, {
      toValue: 1,
      duration: 1200,
      easing: Easing.ease,
    }).start();
  };
  stopAnimation = () => {
    Animated.timing(this.state.animatedValue, {
      toValue: 0,
      duration: 700,
      easing: Easing.linear,
    }).start();
  };
  onViewableItemsChanged = ({viewableItems, changed}) => {
    console.log('Visible items are', viewableItems);
    // console.log('Changed in this iteration', changed);
    if (viewableItems.length == 0) {
      this.stopAnimation();
      return;
    }
    if (viewableItems[0].isViewable == true) {
      this.handleAnimation();
      console.log('should Animation start');
    }
  };
  render() {
    return (
      <FlatList
        data={this.data}
        // viewabilityConfigCallbackPairs={this.viewabilityConfigCallbackPairs}
        onViewableItemsChanged={this.onViewableItemsChanged}
        viewabilityConfig={{
          itemVisiblePercentThreshold: 300,
        }}
        renderItem={({item}, index) => {
          return (
            <Animated.View
              style={{
                transform: [
                  {
                    scaleX: this.state.animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [1, 1.22],
                    }),
                  },
                  {
                    scaleY: this.state.animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [1, 1.22],
                    }),
                  },
                ],
              }}>
              <PopularFood
                key={index}
                navigate={() => alert('product Detailes')}
                styleContainer={{
                  marginTop: 20,
                  justifyContent: 'center',
                  width: 250,
                  height: 250,
                }}
                img={item.image}
                FavoritePress={() => alert('Favorite')}
                locatePress={() => alert('Locate ')}
                imageStyle={{height: 85, width: 100}}
                labelContainerStyle={{width: 140}}
                favIconStyle={{top: 0, right: 10, width: 27, height: 27}}
                labelStyle={{fontSize: 15}}
                name={item.name}
                heartSize={20}
                locateSize={25}
                numberOfReviews={item.reviews}
                price={item.price}
              />
            </Animated.View>
          );
        }} //method to render the data in the way you want using styling u need
        horizontal
        keyExtractor={item => item.key.toString()}

        // numColumns={2}
      />
    );
  }
}

export default MenuScreen;