Passer un paramètre pour une image en fonction du profil

Bonjour à tous,

J'affiche des stations sur une carte.
Les stations ont des fonctions différentes: météo, irrigation, gel.

J'aimerais donc afficher un picto pour une station en fonction de son mode.

Sur ma Map, j'affiche donc des markers et chaque marker doit avoir le picto de sa station (picto mété, picto température, picto irrigation etc).

Ci-dessous fonctionne très bien, sauf que j'affiche toujours le même picto

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 {markers?.map((marker, index) => (
              <Marker
                key={index}
                title={marker.name}
                coordinate={marker}
                //image={require("@/assets/images/markers/1.png")}
                onPress={() => onMarkerSelected(marker, marker.id_station)}
              >
                <Callout onPress={calloutPressed}>
                  <View style={{ padding: 0, alignItems: 'center'}}>
                    <Image height={15} source={require('"@/assets/images/markers/1.png')} />
                    <Text style={{ fontSize: 16 }}>{marker.name}</Text>
 
                    <Link href={{pathname: "/station/[id]", params: {id: marker.id_station}}}>Détail</Link>
                  </View>
                </Callout>
 
              </Marker>
            ))}

Je reprneds la partie qui nous intéresse

Code:

<Image height={15} source={require("@/assets/images/markers/1.png")} />

J'ai essayé plusieurs truc sans succès

Code:

<Image height={15} source={require("@/assets/images/markers/"+marker.id_station+".png")} />

Ceci ne fonctionne èas

Code:

1
2
3
4
  const icon = (id:number) => {
    return 'require("@/assets/images/markers/'+ id +'.png")'
  }
<Image height={15} source={icon(1)} />

Ceci fontionne maintenant, mais je ne suis pas convaincu que c'est le top. (L'idex du tableau est le même que le numéro de l'image qui est aussi le même que l'id du type de la station

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  const ic = [
    {
      id: '0', // Apparemment inutile....
      src: require("@/assets/images/markers/0.png"), // Marker neutre
    },
    {
      id: '1',
      src: require("@/assets/images/markers/1.png"), // Température
    },
    {
      id: '2',
      src: require("@/assets/images/markers/2.png"), // Irrigation
    },
    {
      id: '3',
      src: require("@/assets/images/markers/3.png"), // Météo
    },
    {
      id: '4',
      src: require("@/assets/images/markers/4.png"), // Workshop Bougie à pellete (gel)
    },
    {
      id: '5',
      src: require("@/assets/images/markers/5.png"), // Gateway
    },
  ];
 
<Image height={15} source={ic[marker.id_station_type].src} />

J'aurais préféré la fonction, mais malheureusement, ca ne passe pas.

Il n'y a pas une manière plus élégante de faire ca?