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

Question

通常在 React Native 中，当您尝试将轮播添加到显示图像数组的地图时，轮播嵌套在 MapView 组件内。但是当您加载覆盖地图某些区域的 activity 时，它总是存在。我想要的是仅在触摸地图上的图标后才弹出轮播。我该怎么做？

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

} };

Answer 1

尝试这种方式（已更新）

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

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

How do I add a carousel to a map that It only pops up when an icon on the map being touched in React Native react-native-snap-carousel

react-native

react-native-maps

react-native-snap-carousel