在 SVG 图标的中心叠加文本（React-Native）

Question

我正在尝试使用 react-native-maps 实现类似的东西，我需要在标记上显示徽章。无论如何我可以做到吗？

我发现我可以使用 Callout 将工具提示显示在标记外。但就我而言，我需要标记上的徽章。

有人能帮我解决一下吗？

当前输出：

预期输出：

CustomMarker.js

import React from "react";
import { Badge } from "react-native-elements";
import { Marker, Callout } from "react-native-maps";

const CustomMarker = ({ coordinate }) => {
  return (
    <Marker coordinate={coordinate}>
      <Callout>
        <Badge value="2" status="error" />
      </Callout>
    </Marker>
  );
};

export default CustomMarker;

Answer 1

最后我用下面的代码让它工作

import React from "react";
import { Marker } from "react-native-maps";
import { View, Text } from "react-native";
import Pin from "../assets/Map/Pin.svg";

const CustomMarker = ({ coordinate, pinColor, value }) => {
  return (
    <Marker coordinate={coordinate} pinColor={pinColor}>
      <View
        style={{
          alignItems: "center",
        }}
      >
        <Pin width={45} height={40}></Pin>
       
        <Text
          style={{
            position: "absolute",
            color: "white",
            fontWeight: "bold",
            textAlign: "center",
            fontSize: 20,
            marginBottom: 10,
          }}
        >
          {value}
        </Text>
      </View>
    </Marker>
  );
};

export default CustomMarker;

在 SVG 图标的中心叠加文本（React-Native）

Overlay Text in the center of the SVG icon (React-Native)

react-native-maps

react-native-elements