通常在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>
);
} };