当我按下onPress时在Marker中使用相同的动画

Question

因此，当在此url中滚动时，我只复制了具有自定义动画标记和区域焦点的MapView的这些代码。我的问题是，如何与在Card View中按onPress时一样使用插值或动画标记？

所以现在该功能将是两个，一个是滚动时的动画标记，而另一个是按下时的动画标记。

我已经添加了如何为其区域设置动画的方法，现在的目标是当我按下与滚动时的代码相同的项目的onPress时如何使用动画标记？

以下是滚动时动画标记的代码：

UNSAFE_componentWillMount(){
    this.index = 0;
    this.animation = new Animated.Value(0);
}

componentDidMount() {
    this.askMultiPermissionOnAndroid();

    this.animation.addListener(({ value }) => {
        let index = Math.floor(value / CARD_WIDTH + 0.3); // animate 30% away from landing on the next item
        if (index >= this.props.eventsState.length) {
            index = this.props.eventsState.length - 1;
        }
        if (index <= 0) {
            index = 0;
        }

        clearTimeout(this.regionTimeout);
        this.regionTimeout = setTimeout(() => {
            if (this.index !== index) {
                this.index = index;
                const { latitude, longitude } = this.props.eventsState[index];
                this.map.animateToRegion(
                    {
                        latitude,
                        longitude,
                        latitudeDelta: this.state.focusedLocation.latitudeDelta,
                        longitudeDelta: this.state.focusedLocation.longitudeDelta,
                    },
                    350
                );
            }
        }, 10);
    });
}

 render () {
  //For the Scroll View Card
    const interpolations = this.props.eventsState.map((marker, index) => {
        const inputRange = [
            (index - 1) * CARD_WIDTH,
            index * CARD_WIDTH,
            ((index + 1) * CARD_WIDTH),
            ];
        const scale = this.animation.interpolate({
            inputRange,
            outputRange: [1, 2.5, 1],
            extrapolate: "clamp",
        });
        const opacity = this.animation.interpolate({
            inputRange,
            outputRange: [0.35, 1, 0.35],
            extrapolate: "clamp",
        });
        return { scale, opacity };
    });
   return (
      <MapView
                style={styles.map}
                initialRegion={{
                    latitude: 14.6317303,
                    longitude: 121.0324869,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421
                }}
                onPress={this.pickLocationHandler}
                ref={ref => this.map = ref}
                provider={PROVIDER_GOOGLE}
            >
            {this.props.eventsState.map((marker, index) => {
                const scaleStyle = {
                    transform: [
                        {
                            scale: interpolations[index].scale,
                        },   
                    ],
                };
                const opacityStyle = {
                    opacity: interpolations[index].opacity,
                };
                return (
                    <Marker 
                        key={index} 
                        coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
                        onPress={() => {
                            navigate('EventDetail', {
                                eventId: marker.id
                            });
                        }}
                    >
                        <Animated.View style={[styles.markerWrap, opacityStyle]}>
                            <Animated.View style={[styles.ring, scaleStyle]} />
                            <View style={styles.marker} />
                        </Animated.View>
                    </Marker>
                );
            })}
     </MapView>
     <Animated.FlatList
                horizontal
                scrollEventThrottle={1}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                snapToInterval={SNAP_INTERVAL}
                onScroll={Animated.event(
                    [
                      {
                        nativeEvent: {
                          contentOffset: {
                            x: this.animation,
                          },
                        },
                      },
                    ],
                    { useNativeDriver: true }
                )}
                style={styles.scrollView}
                contentContainerStyle={styles.endPadding}
                data={this.props.eventsState}
                keyExtractor={item => item.id}
                renderItem={(itemData) => (
                    <View style={styles.event}>
                        <View style={styles.touchable}>
                            <TouchableCmp 
                                onPress={() => {
                                    //ANIMATED MARKER HERE WHEN onPress
                                    this.map.animateToRegion({
                                        latitude: itemData.item.latitude,
                                        longitude: itemData.item.longitude,
                                        latitudeDelta: this.state.focusedLocation.latitudeDelta,
                                        longitudeDelta: this.state.focusedLocation.longitudeDelta
                                    }, 350)
                                }}
                                useForeground
                            >
                                <View>
                                    <ImageBackground source={{uri: itemData.item.imageUrl}} style={styles.image}>
                                        <View style={styles.textContainer}>
                                            <Text numberOfLines={1} style={styles.title}>{itemData.item.title}</Text>
                                            <Text numberOfLines={2} style={styles.description}>{itemData.item.description}</Text>
                                        </View>
                                    </ImageBackground>
                                </View>
                            </TouchableCmp>
                        </View>
                    </View>
                )}
            />
   );
 }