React native 如何将旋转木马添加到地图，使其仅在地图上的图标在React Native snap carousel中被触摸时才会弹出

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

render（）{
返回(
这是.\u map=map}
showsUserLocation={true}
style={style.map}
initialRegion={this.state.initialPosition}
customMapStyle={mapStyle}>
{
this.state.coordinates.map（（标记，索引）=>(
this.state.markers[index]=ref}
onPress={（）=>this.onMarkerPressed（标记，索引）}
坐标={纬度：标记。纬度，经度：标记。经度}
title={'Technical Support'}>
{marker.name}
))
}
{this._carousel=c；}}
数据={this.state.coordinates}
containerCustomStyle={styles.carousel}
renderItem={this.renderCarouselItem}
sliderWidth={Dimensions.get（'window'）.width}
itemWidth={300}
onSnapToItem={（索引）=>this.onCarouselItemChange（索引）}
/>
);

} };

试试这种方法（升级版）

state={markerPressed:false}；
无标记（…）{
this.setState（{markerPressed:true}）；
}
render（）{
返回(
这是.\u map=map}
showsUserLocation={true}
style={style.map}
initialRegion={this.state.initialPosition}
customMapStyle={mapStyle}>
{
this.state.coordinates.map（（标记，索引）=>(
this.state.markers[index]=ref}
onPress={（）=>this.onMarkerPressed（标记，索引）}
坐标={纬度：标记。纬度，经度：标记。经度}
title={'Technical Support'}>
setMarkerPressed（真）}>
{marker.name}
))
}
{this.state.markerPressed&&{this.u carousel=c；}}
数据={this.state.coordinates}
containerCustomStyle={styles.carousel}
renderItem={this.renderCarouselItem}
sliderWidth={Dimensions.get（'window'）.width}
itemWidth={300}
onSnapToItem={（索引）=>this.onCarouselItemChange（索引）}
/>}
);
} };

很遗憾，它没有工作。上面说钩子不能那样用。可能是因为版本不匹配。您是否在代码中使用挂钩？据说react dom（<16.8.0）或react native（<0.59）还不支持钩子。我提到的上述代码嵌套在一个类中。因此，我认为在该类中不能调用useState钩子。我想我用的是0.63。我收到的确切错误消息是“错误：钩子调用无效。只能在函数组件主体内部调用钩子。发生这种情况的原因可能是以下原因之一”原因：1。React和渲染器（如React DOM）2的版本可能不匹配。你可能违反了钩子3的规则。在同一个应用程序中，您可能有多个React副本。我已将答案更新为已转换为类。请查收

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