Question

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

有出处source，并且有我的作品样本

经过多次尝试，我放弃了...有没有办法将onpress的x位置添加到Animated.scroolview

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

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>
    );
  }
}

Answer 1

要滚动到滚动视图中的x，y位置。在滚动视图中使用scrollTo函数。在此处查看关于它的react本机文档https://facebook.github.io/react-native/docs/scrollview#scrollto。

使用ref属性在滚动视图中执行该方法。

现在，您需要标识标记的x和y，以便可以滚动到它们。从来没有做过这样的事情，但是这里有一篇关于计算本机元素https://github.com/facebook/react-native/issues/1374的x和y的文章。

Answer 2

找到解决方案

添加

<Animated.ScrollView 
 horizontal 
 ref={(c) => {this.scroll = c}} 
 scrollEventThrottle={1} 
 showsHorizontalScrollIndicator={true} 
 snapToInterval={CARD_WIDTH} 
 onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: this.animation, }, }, },], { useNativeDriver: true } )} 
 style={styles.scrollView} 
 contentContainerStyle={styles.endPadding} >

这是地图视图标记

<MapView.Marker 
 key={index} 
 coordinate={marker.coordinates} 
 onPress={() => this.handleMarkerPress(index)} >

和handlemarkerpress

this.scroll.getNode().scrollTo({x: e * 375, y: 0, animated: true}); （我的卡宽度为375）

去查看animated.Scrollview

2 个答案: