反应本机。在标记旁边显示组件

Question

有没有办法创建类似于下面所示的弹出窗口。

我正在使用 react-native-maps、google provider 和 markers，它们运行良好，只是标记旁边的弹出窗口让我遇到问题

Answer 1

我们可以使用 Callout 组件来做到这一点。

Callout 组件接受自定义视图并且在接受内容方面很灵活：

Callouts to markers can be completely arbitrary react views, similar to markers. As a result, they can be interacted with like any other view.

来源：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 内容动态化，您可以使用 expo-location 中的函数 reverseGeocodeAsync 来获取有关位置的信息。

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

反应本机。在标记旁边显示组件

React Native. Show component next to the marker

google-maps

react-native

react-native-android