如何在地图上添加轮播，该轮播仅在React Native中触摸地图上的图标时会弹出

问题描述

通常在react native中，当您尝试向显示图像数组的地图中添加轮播时，轮播会嵌套在MapView组件内。但是，当您加载覆盖地图某些区域的活动时，它始终存在。我想要的是轮播仅在触摸地图上的图标后弹出。我该怎么办？

render() {
return (
    <View style={styles.container} >
    <MapView
     
     Provider= {PROVIDER_GOOGLE}
     ref={map => this._map = map}
     showsUserLocation={true}
     style={styles.map}
     initialRegion={this.state.initialPosition}
     customMapStyle={mapStyle}>

        {
            this.state.coordinates.map((marker,index) => (
                <Marker
                    key={marker.name}
                    ref={ref => this.state.markers[index] = ref}
                    onPress={() => this.onMarkerpressed(marker,index)}
                    coordinate={{latitude: marker.latitude,longitude: marker.longitude}}
                    title={'Technical Support'}>
                
                <Image 
                    source={require('../icons/tec.png')}
                    style={styles.icon}/>
                
                <Callout>
                    <View style={styles.callout}><Text adjustsFontSizetoFit numberOfLines={1}>{marker.name}</Text></View>
                </Callout>        
                
                </Marker>
            ))
        }

   </MapView>

   <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.coordinates}
          containerCustomStyle={styles.carousel}
          renderItem={this.renderCarouselItem}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={300}
          onSnapToItem={(index) => this.onCarouselItemChange(index)}
        />
   </View>
);

} };

解决方法

尝试这种方式（更新）

state = { markerPressed: false };

onMarkerPressed(...){
  this.setState({ markerPressed: true });
}

render() {
return (
    <View style={styles.container} >
    <MapView
     
     Provider= {PROVIDER_GOOGLE}
     ref={map => this._map = map}
     showsUserLocation={true}
     style={styles.map}
     initialRegion={this.state.initialPosition}
     customMapStyle={mapStyle}>

        {
            this.state.coordinates.map((marker,index) => (
                <Marker
                    key={marker.name}
                    ref={ref => this.state.markers[index] = ref}
                    onPress={() => this.onMarkerPressed(marker,index)}
                    coordinate={{latitude: marker.latitude,longitude: marker.longitude}}
                    title={'Technical Support'}>
                
                <TouchableOpacity onPress={() => setMarkerPressed(true)}>
                <Image 
                    source={require('../icons/tec.png')}
                    style={styles.icon}/>
              </TouchableOpacity>   
                
                <Callout>
                    <View style={styles.callout}><Text adjustsFontSizeToFit numberOfLines={1}>{marker.name}</Text></View>
                </Callout>        
                
                </Marker>
            ))
        }

   </MapView>

   {this.state.markerPressed  && <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.coordinates}
          containerCustomStyle={styles.carousel}
          renderItem={this.renderCarouselItem}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={300}
          onSnapToItem={(index) => this.onCarouselItemChange(index)}
        />}
   </View>
);
} };