Utilisation condition dans un render
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:
<Header imageHeaderStation={2}/>
Dans la vue stations.tsx, j'affiche toutes mes stations et j'appelle Header ainsi
stations.tsx
Code:
<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:
<Header imageHeader="home2.jpg"/>
Et j'appelle l'image d'une station, dans la vue qui affiche les informations d'une station ainsi
Code:
<Header imageHeaderStation={1}/>
Si non dans d'autres vues, je peux avoir simplement ceci qui va m'adficher une image par défaut
Je commence comme cela et la ca bug déjà en utilise {imageHeader ? :}. C'est comme si je ne pouvais faire elseif()
Code:
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:
require('@/assets/images/app/'+imageHeader) :
J'ai aussi essayé un truc du genre sans succès
Code:
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:
require('@/assets/images/app/header2.jpg) :
Voici le code qui pose qui doit clairement évoluer...
Header.tsx
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
| 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
