Bonjour,

Je cherche depuis un moment sans succès et je me troune vers vous.

Je dois afficher une des trois image en fonction de deux variables mais je dois surtout récupérer la valeur d'une variable pour affciher une image.

Voici mon code (peut-être que je m'y prend mal)

Les deux variable qui nous concerne est imageHeader et imageHeaderPage

Dasn la vue station.tsx, j'appelle le componemnt <Header> ainsi (qui va afficher les informations d'une station)

station.tsx
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<Header imageHeaderStation={2}/>
Dans la vue stations.tsx, j'affiche toutes mes stations et j'appelle Header ainsi

stations.tsx
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
<Header imageHeader="home2.jpg"/>


Avant il faut savoir.
Si imageHeaderStation a une valeur (1, 2, 3,...) j'affiche l'image d'une station

Avant d'aller dans les détail. en résumé, j'aimerais faire

Si imageHeaderStation == true affiche une image distance ({uri: 'https://bud.eco-sensors.ch/img/stations/station-'+ imageHeaderStation +'.jpg'})
Si non Si imageHeader == true affiche une image local (require('@/assets/images/app/'+imageHeader))
si non affiche une image local par default (require('@/assets/images/app/header1.jpg'))

J'appelle Header dans la page qui affiche toutes les stations ainsi
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
<Header imageHeader="home2.jpg"/>

Et j'appelle l'image d'une station, dans la vue qui affiche les informations d'une station ainsi
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
<Header imageHeaderStation={1}/>

Si non dans d'autres vues, je peux avoir simplement ceci qui va m'adficher une image par défaut
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
<Header />

Je commence comme cela et la ca bug déjà en utilise {imageHeader ? :}. C'est comme si je ne pouvais faire elseif()
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<Image
                    style={css.jumbotronImage}
                    source={imageHeaderStation ? 
                        {uri: 'https://bud.aaaaa.ch/img/stations/station-'+ imageHeaderStation +'.jpg'} :
{imageHeader ? require('@/assets/images/app/' + imageHeader) :
                        require('@/assets/images/app/header.jpg')}
                />



L'autre problème se trouve ici. J'ai toujours une erreur au niveau de '+imageHeader
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
require('@/assets/images/app/'+imageHeader) :
J'ai aussi essayé un truc du genre sans succès
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
require('@/assets/images/app/${imageHeader}) :
J'ai déjà vu ca (${variable} )à quelque part, mais ca ne joue pas chez moi

Comment je peux récupréer la valeur de imageHeader pour qu'au final j'ai un truc équivalent à
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
require('@/assets/images/app/header2.jpg) :

Voici le code qui pose qui doit clairement évoluer...
Header.tsx
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
type Props = {
    imageHeaderStation?: number | null,
    imageLogo?: number | null,
    imageHeader?: string | null,
    showLogo?: boolean,
}
 
export function Header({imageHeader, imageLogo, imageHeaderStation, showLogo, ...rest}: Props){
    const colors = useThemeColors();
 
    return(
        <View style={[styles, {backgroundColor: colors.appHeadBackgroundColor }]} {...rest}>
            <View style={css.jumbotronContainer}>
 
                <Image
                    style={css.jumbotronImage}
                    source={imageHeaderStation ? 
                        {uri: 'https://bud.eco-sensors.ch/img/stations/station-'+ imageHeaderStation +'.jpg'} :
                        require('@/assets/images/app/header.jpg')}
                />
            </View>
        </View>
    )
}

Merci pour vos lumières