android - react native map : Markers image doesn't show using Custom Marker in react-native-maps

Question

我正在使用 react-native-maps 但是我遇到了一个问题，在谷歌搜索了很多没有答案之后我不得不在这里问。我正在尝试使用自定义标记作为 map 中的标记，如下图所示

• 我在搜索中发现需要使用Custom Marker来完成maker的设计，于是我创建了一个Custom Marker组件

  import React, { Component } from "react";
  import { View } from "react-native";
  import {
  Text,
  Left,
  Right,
  Thumbnail,
  } from "native-base";
  const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");
  class CustomMarker extends Component {
  render() {
      return (
      <View style={{ flexDirection: 'row', width: 140, height: 60, 
        borderRadius: 70, backgroundColor: 'orange' }}>
          <Left>
              <Thumbnail source={defaultEmployeeLogo} />
          </Left>
          <Right>
              <Text style={{
                  color: '#fef',
                  fontSize: 13,
                  paddingBottom: 2,
                  fontFamily: 'Roboto',
                  alignItems: 'center',
                  paddingRight: 10
              }}>Mohammad</Text>
          </Right></View >);
     }
  }
  export default CustomMarker;
  

当我单独使用 CustomMarker.js 类时它工作正常并且显示图像但是当我将它用作标记自定义 View 时它不显示图像

我不知道为什么它不能在 android 中使用 Custom Marker 渲染图像。这是我使用 map 、标记和自定义标记类的代码

return (
  <View style={styles.map_container}>
    <MapView
      style={styles.map}
      customMapStyle={customrMapStyle}
      region={{
        latitude: this.state.region.latitude,
        longitude: this.state.region.longitude,
        latitudeDelta: 0.4,
        longitudeDelta: 0.41,
      }} >
      {
        coordinationData.map(function (marker, i) {

          let lat = marker.latLang.latitude;
          let lang = marker.latLang.longitude;
           <MapView.Marker
            key={i}
            coordinate={
              {
                latitude: lat,
                longitude: lang,
                latitudeDelta: 0.4,
                longitudeDelta: 0.41
              }
            }
            title={marker.title}
            description={marker.description}

          >
            <CustomMarker />
          </MapView.Marker>
        })}
    </MapView>
  </View>

我们将不胜感激。

Answer 1

为此 https://github.com/react-native-community/react-native-svg 使用 SVG

<Marker
    coordinate={{
        longitude: lang,
        latitude: lat,
    }}
>
    <View style={{
        flexDirection: 'row', width: 100, height: 30,
        backgroundColor: 'orange'
    }}>
        <Svg
            width={40} height={30}>
            <Image
                href={url}
                width={40}
                height={30}
            />
        </Svg>
        <View
            style={{
                flexDirection: 'column'

            }}
        >
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.title}</Text>
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.description}</Text>
        </View>
    </View>
</Marker>