Discussion :

[pierrot10]

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

[pierrot10]

J'ai aborder le problème autrement et je suis arrivé à faire ceci

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<Image
                    style={css.jumbotronImage}
                    source={imageHeaderStation ? 
                        {uri: 'https://bud.eco-sensors.ch/img/stations/station-'+ imageHeaderStation +'.jpg'} :
                        imageHeader ? require('@/assets/images/app/header1.jpg'):
                        require('@/assets/images/app/header.jpg')}
/>

Le problème que je rencontre encore c'est que je n'arrive toujours pas à faire cela, sachant que imageHeader vaut header1.jpg

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<Image
                    style={css.jumbotronImage}
                    source={imageHeaderStation ? 
                        {uri: 'https://bud.eco-sensors.ch/img/stations/station-'+ imageHeaderStation +'.jpg'} :
                        imageHeader ? require('@/assets/images/app/'+imageHeader):
                        require('@/assets/images/app/header.jpg')}
/>

Ceci m'affiche le message d'erreur

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<Image
                    style={css.jumbotronImage}
                    source={imageHeaderStation ? 
                        {uri: 'https://bud.eco-sensors.ch/img/stations/station-'+ imageHeaderStation +'.jpg'} :
                        imageHeader ? require('@/assets/images/app/${imageHeader}'):
                        require('@/assets/images/app/header.jpg')}
                />

@/assets/images/app/${imageHeader} could not be found within the project or in there directories node_module