Реагировать на родной. Показать компонент рядом с маркером

#react-native #google-maps #react-native-android

#google-карты #react-native

Вопрос:

Есть ли способ создать всплывающее окно, подобное показанному ниже.

Я использую react-native-maps , google provider и markers которые работают хорошо, у меня возникают проблемы только с всплывающим окном рядом с маркером

введите описание изображения здесь

Ответ №1:

Для этого мы можем использовать Callout компонент.

Callout Компонент принимает пользовательский вид и является гибким в том, какой контент он принимает:

Выноски для маркеров могут быть совершенно произвольными представлениями react, аналогичными маркерам. В результате с ними можно взаимодействовать, как с любым другим представлением.

Источник:https://github.com/react-native-community/react-native-maps#custom-callouts


Итак, пример, адаптированный к вашему варианту использования, выглядит примерно так:

 const CustomCalloutView = ({ marker }) => (
  <View>
    <View style={{ flex: 1, flexDirection: "row" }}>
      <Text>Kyiv Ukraine</Text>
      <Badge value="2" status="warning" />
    </View>
    <Text> 1°</Text>
  </View>
);

// ...

<Marker coordinate={marker.latlng}>
  <Callout>
    <CustomCalloutView marker={{...marker}} />
  </Callout>
</Marker>
  

Для значка я использовал значок, который предоставляет react-native-elements библиотека (https://react-native-elements.github.io/react-native-elements/docs/badge ), но вы можете изменить это на все, что захотите.


Чтобы сделать CustomCalloutView содержимое динамическим на основе координат маркера, переданных в качестве реквизитов, вы можете использовать функцию reverseGeocodeAsync из expo-location для получения информации о местоположении.

Источник:https://docs.expo.io/versions/latest/sdk/location/#locationreversegeocodeasynclocation.

Пример использования динамических координат маркера и expo-location :

 import * as Location from "expo-location";
// ...

const CustomCalloutView = ({ marker }) => {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    Location.reverseGeocodeAsync(marker).then(res => {
      setLocation(res[0]);
    });
  }, []);

  return (
    <View>
      {location amp;amp; (
        <View>
          <View style={{ flex: 1, flexDirection: "row" }}>
            <Text>{`${location.city}, ${location.country}`}</Text>
            <Badge value="2" status="warning" />
          </View>
          <Text> 1°</Text>
        </View>
      )}
    </View>
  );
};