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

问题描述

我正在尝试使用 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;

解决方法

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

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;