react-native - 如何将轮播添加到地图中，它仅在 React Native 中触摸地图上的图标时才会弹出 react-native-snap-carousel

Question

通常在本机反应中，当您尝试将轮播添加到显示图像数组的地图时，轮播嵌套在 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>
);

} };

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