去查看animated.Scrollview

使用此代码，我尝试在每个标记上添加一个onpress选项

有来源，还有我的工作样本

经过多次尝试后，我放弃了……是否有办法在onpress的Animated.ScrollView上添加x位置

当我滚动时，我可以看到标记发生变化，但是我想在每个标记中添加一个onpress函数。当按下一个标记时，我想将scrollview设置为制造者的位置

componentWillMount() {
    this.index = 0;
    this.animation = new Animated.Value(0);
  }
  componentDidMount() {
    // We should detect when scrolling has stopped then animate
    // We should just debounce the event listener here
    AsyncStorage.getItem('userToken', (err, result) => {
      if (this.state.userToken == null) {
        this.setState({ userToken: result })
        this.GetAllMarker()
      }
    });

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

      clearTimeout(this.regionTimeout);
      this.regionTimeout = setTimeout(() => {
        if (this.index !== index) {
          this.index = index;
          const { coordinates } = this.state.markers[index];
          console.log(index)
          this.map.animateToRegion(
            {
              ...coordinates,
              latitudeDelta: this.state.region.latitudeDelta,
              longitudeDelta: this.state.region.longitudeDelta,
            },
            350
          );
        }
      }, 10);
    });
  }


  GenerateBearer() {
    let tmp = `Bearer ` + this.state.userToken
    tmp = tmp.replace('"', '');
    tmp = tmp.replace('"', '');
    return (tmp)
  }

  GetAllMarker() {
    let Bearer = this.GenerateBearer();
    console.log(Bearer)

    fetch(Config.API_URL + "/api/public/user/aroundMe?latitude=" + this.state.region.latitude + "&longitude=" + this.state.region.longitude + "&rayon=50", {
      method: 'GET',
      headers: {
        'Accept': '*/*',
        'Content-Type': 'application/json',
        'Authorization': Bearer,
      }
    })
      .then(res => res.json())
      .then(res => {
        this.setState({ markers: res })
      })
      .catch(error => {
        this.setState({ error: error });
      });

  }

  handleMarkerPress(e){
    this.state.markers[1] = e
    console.log(e)
  }


  render() {
    const interpolations = this.state.markers.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 (
      <View style={styles.container}>
        <MapView
          ref={map => this.map = map}
          initialRegion={this.state.region}
          style={styles.container}
        >
          <UrlTile
            urlTemplate="http://ip/styles/klokantech-basic/{z}/{x}/{y}.png"
            zIndex={-1}
          />
          {this.state.markers.map((marker, index) => {
            const scaleStyle = {
              transform: [
                {
                  scale: interpolations[index].scale,
                },
              ],
            };
            const opacityStyle = {
              opacity: interpolations[index].opacity,
            };

            return (
              <MapView.Marker key={index} coordinate={marker.coordinates} onPress={(event) => this.handleMarkerPress(index)} >
                <Animated.View style={[styles.markerWrap, opacityStyle]} >
                  <Animated.View style={[styles.ring, scaleStyle]} />
                  <View style={styles.marker} />
                </Animated.View>
              </MapView.Marker>
            );

          })}
        </MapView>
        <Animated.ScrollView
          horizontal
          scrollEventThrottle={1}
          showsHorizontalScrollIndicator={true}
          snapToInterval={CARD_WIDTH}
          onScroll={Animated.event(
            [{nativeEvent: {
              contentOffset: {
                x: this.animation,
                  },
                },},],
            { useNativeDriver: true }
          )}
          style={styles.scrollView}
          contentContainerStyle={styles.endPadding}
        >
          {this.state.markers.map((marker, index) => {
            if (marker.isAlerte == false)
              return (
                <View style={styles.card} key={index}>
                  <Image
                    source={marker.image}
                    style={styles.cardImage}
                    resizeMode="cover"
                  />
                  <View style={styles.textContent}>
                    <Text numberOfLines={1} style={styles.cardtitle}>{marker.espace.titre}</Text>
                    <Text numberOfLines={1} style={styles.cardDescription}>
                      {marker.description}
                    </Text>
                  </View>
                </View>)
            else
              return (
                <View style={styles.card} key={index}>
                  <Image
                    source={marker.image}
                    style={styles.cardImage}
                    resizeMode="cover"
                  />
                  <View style={styles.textContent}>
                    <Text numberOfLines={1} style={styles.cardtitle}>{marker.alerte.type}</Text>
                    <Text numberOfLines={1} style={styles.cardDescription}>
                      {marker.description}
                    </Text>
                  </View>
                </View>)
          })
          }
        </Animated.ScrollView>
      </View>
    );
  }
}