web-dev-qa-db-fra.com

réagir l'image native du marqueur de cartes natives ne peut pas changer par défaut

J'ai passé environ 5 heures à essayer de faire fonctionner cela avec de nombreuses permutations de code différentes, puis à reconstruire. Pour la vie de moi, je ne peux pas changer le marqueur "pointeur rouge" par défaut comme image de marqueur par défaut dans les cartes natives réactives.

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

...

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    ref={ref => {this.map = ref;}}
    minZoomLevel={4}  // default => 0
    maxZoomLevel={10} // default => 20
    enableZoomControl={true}
    showsUserLocation = {true}
    showsMyLocationButton = {true}
    zoomEnabled = {true}
    initialRegion={{
        latitude: 37.600425,
        longitude: -122.385861,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}
>
    <MapView.Marker
        coordinate={marker.location}
        image={require('./images/test.png')}        <------ HERE
        width={48}
        height={48}
    />
</MapView>

Les images existent définitivement dans le bon dossier, j'ai essayé différents formats d'image png/gif/jpg/svg, j'ai essayé d'utiliser {{uri:...}} Et icon/image, En ajoutant et en supprimant des attributs largeur/hauteur . Rien ne semble fonctionner. Je reçois toujours le pointeur rouge par défaut.

Ai-je raté quelque chose d'évident?

Le packager/compilateur de projet échoue lorsque je require une image qui n'existe pas ou un type non pris en charge. Il peut certainement voir l'image, mais ne fait rien avec. Mêmes résultats sur l'émulateur et sur le périphérique réel.

image={require('./images/test.png')}

Cette ligne ne fait rien, comme si elle était ignorée d'une manière ou d'une autre.

react-nativegoogle-maps-markersreact-native-androidreact-native-maps
4
Jammo

Il existe deux solutions:

La première solution (recommandée)

Redimensionnez votre image marqueur avec l'éditeur d'image (tel que Photoshop, ....) et utilisez comme icon dans marker

Pour ce faire, vous pouvez réaliser trois photos de tailles différentes (YOUR_MARKER.png, [email protected], [email protected]) (React Native affiche automatiquement l'élément approprié).

C'est une bonne solution si vous avez un grand nombre de marqueurs (vous pouvez vous référer ici pour clarifier cela)

<Marker
    coordinate={ ... }
    tracksViewChanges={false}
    icon={require('./YOUR_MARKER.png')}
/>

La deuxième solution

Comme l'a dit @ shubham-raitka, vous pouvez utiliser le Image à l'intérieur du marker

<Marker
    coordinate={ ... }
>
    <Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35 }} />

</Marker>

Dans ce cas, si votre nombre de marqueurs est élevé (environ 50 ou plus), les performances de la carte seront très faibles.Par conséquent, il n'est pas recommandé d'utiliser cette méthode

0
Bashirpour