React native 反应自然。在标记旁边显示组件

有没有一种方法可以创建一个类似下面所示的弹出窗口

我使用的

react native maps

、

google provider

和

markers

都很好，但我遇到的问题只是标记旁边的弹出窗口

---

我们可以使用

Callout

组件来执行此操作

Callout

组件接受自定义视图，并且在接受的内容方面具有灵活性：

标记的标注可以是完全任意的视图，类似于标记。因此，它们可以像任何其他视图一样进行交互

资料来源：

---

因此，适合您的用例的示例如下所示：

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>

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 && (
        <View>
          <View style={{ flex: 1, flexDirection: "row" }}>
            <Text>{`${location.city}, ${location.country}`}</Text>
            <Badge value="2" status="warning" />
          </View>
          <Text>+1°</Text>
        </View>
      )}
    </View>
  );
};