Блог

У меня есть a MapView , где я показываю несколько местоположений через Marker s и массив TouchableOpacity s, которые действуют как кнопки.

Каждый раз, когда нажимается одна из этих кнопок, пользователь будет перенаправлен на определенный маркер на карте. Кроме того, для каждого Marker у меня есть выноска с пользовательским компонентом, который показывает информацию об этом местоположении.

Мой вопрос в том, как я могу показать / скрыть выноску при нажатии кнопки TouchableOpacity ? Когда я нажимаю на маркер напрямую, отображается выноска. Это то, что я более или менее пытаюсь архивировать.

Мой код карты выглядит так

 <MapView.Animated
  provider={PROVIDER_GOOGLE}
  initialRegion={initialRegionMap}
  style={StyleSheet.absoluteFillObject}
  onPress={() => Keyboard.dismiss()}
  showsUserLocation
  region={region}
>
   {
     events.map((event, index) => (
       <Marker
         key={index.toString()}
         coordinate={event.eventLocation}
         pinColor={event.isPrivateEvent ? theme.colors.Gold : theme.colors.Red}
       >
         <Callout tooltip onPress={() => goToEvent(index, event.eventName, event)}>
           <EventMapCard
             eventNameText={event.eventName}
             dateText={event.eventDayStart}
             hourText={event.eventHourStart}
             organizerNameText={event.organizerName}
             organizerImageSource={event.organizerImg}
             isPrivateEvent={event.isPrivateEvent}
             imageSource={event.imageLink}
           />
         </Callout>
       </Marker>
     ))
   }
</MapView.Animated>
  

И код кнопок выглядит так

 <FlatList
  data={events}
  keyExtractor={(_, index) => index.toString()}
  style={{ marginTop: 20, marginHorizontal: 15 }}
  renderItem={({ item }) => (
    <Block>
      <EventCardSmall
        eventNameText={item.eventName}
        imageSource={item.imageLink}
        dateText={item.eventDayStart}
        hourText={item.eventHourStart}
        organizerImageSource={item.organizerImg}
        onPress={() => updateRegion(item.eventLocation)}
      />
    </Block>
  )}
/>
  

Я пытался сделать это с помощью useState , но это вообще не работает.