Reagir mapas nativos: a imagem de marcadores não é exibida usando o Marcador personalizado nos mapas de reagir-nativos
estou a usarreact-native-maps
mas enfrentei um problema que, depois de pesquisar bastante sem resposta, me faz perguntar aqui. Estou tentando usar o Marcador personalizado para o marcador no mapa, como na figura a seguir
ao pesquisar, descobri que precisava usar o Custom Marker para realizar o design do fabricante, então criei um componente 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;
quando uso somente a classe CustomMarker.js, ele funciona bem e mostra a imagem, mas quando a uso como visualização personalizada do marcador, não mostra a imagem
Não sei por que não é possível renderizar a imagem com o Marcador personalizado no android. e aqui está o meu código em que estou usando mapa, marcadores e classe de marcador personalizado
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>
qualquer tipo de ajuda seria apreciada.