在Android上反应原生地图标记

问题描述

我在Android上的标记上创建自定义视图时遇到问题。

这是一个带有自定义图标的标记，并且视图的文本绝对位于标记的顶部。这就是在iO上的外观（以及外观）。

但是在Android上，外观完全不同。我知道这是因为Android处理标记的方式不同，但仍然希望获得相同的结果，却找不到解决方法。

在Android上查看：

在标记的自定义图像的宽度处被切掉。

一种选择是为包装图像的视图和带有文本的视图提供宽度，但是如果这样做，它只会向右移动（向左移不起作用），并且标记不再锚定

问题：如何在Android上复制iOs行为？

标记的代码如下：

return (
    <MapViewMarker
      coordinate={{
        latitude: props.vehicle.lat,longitude: props.vehicle.lng,}}
      anchor={{ x: 0.5,y: 0.5 }}
      onPress={props.onMarkerPress}
      stopPropagation
      style={styles.markerStyling}
      tracksViewChanges={tracksViewChangesstate}
    >
      <View style={styles.imageViewStyling}>
        <Image
          source={props.image}
          style={styles.flatMarker}
          onLoad={stopTrackingViewChanges}
        />
        {props.showBattery && (
          <View style={[styles.batteryContainer,urgent
            ? styles.batteryContainerUrgent
            : styles.batteryContainerNonUrgent,{ borderColor: urgent ? COLOR_RED_MARKER_BORDER : props.borderColor }]}
          >
            <Text
              style={[
                styles.batteryText,urgent
                  ? styles.batteryTextUrgent
                  : styles.batteryTextNonUrgent]}
              ellipsizeMode="tail"
              numberOfLines={1}
            >
              {renderMarkerText()}
            </Text>
          </View>
        )}
      </View>
    </MapViewMarker>
  ); 

const styles = StyleSheet.create({
  flatMarker: {
    height: 25,width: 25,},batteryContainer: {
    alignItems: 'center',position: 'absolute',top: 0,paddingVertical: Platform.OS === "ios" ? 1 : 0,borderRadius: 2,borderWidth: 1,batteryContainerNonUrgent: {
    width: '100%',backgroundColor: COLOR_WHITE,batteryContainerUrgent: {
    width: '300%',left: -25,backgroundColor: COLOR_RED_MARKER,zIndex: 30,batteryText: {
    fontFamily: FONT_AVENIR_BLACK,batteryTextUrgent: {
    color: COLOR_WHITE,fontSize: 9,batteryTextNonUrgent: {
    color: COLOR_BLACK,fontSize: 8,markerStyling: {
    zIndex: 20,imageViewStyling: {
    paddingVertical: 8,});

非常感谢您的帮助！

解决方法

对于任何寻求灵感的人，我终于解决了它，为封装视图提供了display: flex和固定宽度，然后按照样式将标记和框视为其子元素，如下所示：

imageViewStyling: {
    paddingVertical: 8,width: 100,display: 'flex',justifyContent: 'center',alignItems: 'center',},