在 SVG 图标中心覆盖文本 (React-Native)答案

【问题标题】：Overlay Text in the center of the SVG icon (React-Native)在 SVG 图标中心覆盖文本 (React-Native)
【发布时间】：2021-03-09 13:35:19
【问题描述】：

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

【问题讨论】：

请在这个问题上帮助我。我被严重打击了
也许这有帮助？ stackoverflow.com/questions/40822129/…
感谢@ArnoTenkink 提供有用的链接。我在这里面临的问题是。我需要显示标记。但在这个解决方案中，它是一个圆圈
它工作了@ArnoTenkink。我已经在答案中发布了我的解决方案。非常感谢您的帮助

标签： react-native-maps react-native-elements

【解决方案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;

【讨论】：