如何解决如何在地图上添加轮播,该轮播仅在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>
);
} };
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。