如何解决在 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。