Ios 转到动画中的视图。滚动视图

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

有来源，有我的工作样本

经过多次尝试，我放弃了。。。有没有办法在我的屏幕上添加x位置到我的Animated.ScrollView

当我滚动时，我可以看到标记正在更改，但我想在每个标记中添加一个onpress功能。当按下标记上的一个按钮时，我想将scrollview设置为我的maker的位置

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

componentWillMount（）{
该指数=0；
this.animation=新的Animated.Value（0）；
}
componentDidMount（）{
//我们应该检测滚动何时停止，然后设置动画
//我们应该在这里消除事件侦听器的影响
AsyncStorage.getItem（'userToken'，（错误，结果）=>{
if（this.state.userToken==null）{
this.setState（{userToken:result}）
this.GetAllMarker（）
}
});
this.animation.addListener（（{value}）=>{
console.log（值）
让index=Math.floor（值/CARD_WIDTH+0.3）；//在距离下一个项目着陆30%的地方设置动画
如果（索引>=this.state.markers.length）{
索引=this.state.markers.length-1；
}
如果（索引）{
如果（this.index！==索引）{
这个指数=指数；
const{coordinates}=this.state.markers[index]；
console.log（索引）
this.map.animateToRegion(
{
…坐标，
latitudeDelta:this.state.region.latitudeDelta，
longitudeDelta:this.state.region.longitudeDelta，
},
350
);
}
}, 10);
});
}
GenerateBarer（）{
让tmp=`Bearer`+this.state.userToken
tmp=tmp.replace（“，”）；
tmp=tmp.replace（“，”）；
返回（tmp）
}
GetAllMarker（）{
让Bearer=this.generateBarer（）；
控制台日志（承载）
获取（Config.API_URL+“/API/public/user/aroundMe？latitude=“+this.state.region.latitude+”&longide=“+this.state.region.longide+”&rayon=50”{
方法：“GET”，
标题：{
“接受”：“*/*”，
“内容类型”：“应用程序/json”，
“授权”：持证人，
}
})
.then（res=>res.json（））
。然后（res=>{
this.setState（{markers:res}）
})
.catch（错误=>{
this.setState（{error:error}）；
});
}
手推车（e）{
this.state.markers[1]=e
控制台日志（e）
}
render（）{
常量插值=this.state.markers.map（（marker，index）=>{
常量输入范围=[
（索引-1）*卡片宽度，
索引*卡片宽度，
（（索引+1）*卡片宽度），
];
常量比例=this.animation.interpolate({
输入范围，
输出范围：[1,2.5,1]，
外推：“钳子”，
});
常量不透明度=this.animation.interpolate({
输入范围，
输出范围：[0.35,1,0.35]，
外推：“钳子”，
});
返回{缩放，不透明度}；
});
返回(
this.map=map}
initialRegion={this.state.region}
style={style.container}
>
{this.state.markers.map（（marker，index）=>{
常量比例样式={
转换：[
{
比例：插值[索引]。比例，
},
],
};
常数opacityStyle={
不透明度：插值[索引]。不透明度，
};
返回(
此.handleMarkerPress（索引）}>
);
})}
{this.state.markers.map（（marker，index）=>{
if（marker.isAlerte==false）
返回(
{marker.espace.titre}
{marker.description}
)
其他的
返回(
{marker.alerte.type}
{marker.description}
)
})
}
);
}
}

滚动到滚动视图中的x、y位置。使用scrollTo在滚动视图中运行。在这里签出关于它的react本机文档

使用ref属性在scrollview中执行该方法

现在您需要识别标记的x和y，以便可以滚动到它们。从来没有做过这样的事情，但这里有一篇文章是关于有人计算react原生元素的x和y。

找到了解决方案

加

{this.scroll=c}
scrollEventThrottle={1}
showshorizontalscrolindicator={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)} >

this.handleMarkerPress（index）}>

还有那个卖手的

this.scroll.getNode（）.scrollTo（{x:e*375，y:0，动画：true}）；

---

（375表示我的卡片宽度）

中的每个组件都作为ref属性进行反应，因此您可以执行类似于ref={map=>this.map=map}的操作。嘿，我有个问题，我注意到您正在遵循/使用CodeDaily的代码。我也在使用它，我的问题是CardView或

动画。ScrollView

没有显示在我的地图视图顶部。你是怎么做到的？还有问题吗@莉莎凯瑟琳娜

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