J'essaie d'afficher des images avec ScrollView.
J'ai un code qui fonctionne lorsque j'utilise des images sur Internet mais pas lorsqu'elles sont locales. Pouvez-vous me dire comment corriger mon code?
Je sais que l'erreur vient de ceci: source = {{require (image)}} mais je ne sais pas comment écrire correctement
const images = [
'./images/localImage1.jpg',
'./images/localImage2.jpg',
//'https://someURLlink2.jpg',
//'https://someURLlink2.jpg',
]
render() {
let imageArray = []
let barArray = []
images.forEach((image, i) => {
console.log(image, i)
const thisImage = (
<Image
key={`image${i}`}
//source={{uri: image}}
source={{require(image)}}
style={{ width: deviceWidth }}
/>
)
imageArray.push(thisImage)
3 Réponses :
Comme react-native dit
Pour que cela fonctionne, le nom de l'image dans require doit être connu statiquement.
En savoir plus sur https: //facebook.github. io / react-native / docs / images.html
La solution stockera donc les images déjà requises dans le tableau
render(){
let imageArray = []
let barArray = []
images.forEach((image, i) => {
console.warn(image, i)
const thisImage = (
<Image
key={`image${i}`}
source={image}
style={{ width: deviceWidth }}
/>
)
imageArray.push(thisImage)
})
return imageArray;
}
et puis appelez l'image, comme ceci;
const images = [
require('./images/localImage1.jpg'),
require('./images/localImage2.jpg')
]
Si vous souhaitez récupérer l'image sur Internet et que la récupération échoue, affichez un one , veuillez consulter cette solution:
const images = [
require('./images/localImage1.jpg'),
require('./images/localImage2.jpg'),
'https://someURLlink2.jpg',
'https://someURLlink2.jpg',
]
render() {
let imageArray = []
let barArray = []
images.forEach((image, i) => {
const thisImage = (
<Image
key={`image${i}`}
source={{uri: image}}
style={{ width: deviceWidth }}
/>
)
imageArray.push(thisImage)
}
Lorsque votre cas d'utilisation est différent et que vous ne souhaitez utiliser que le prop source, essayez de cette manière:
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
defaultSource={{uri: require('./path/to/image.png')}}
/>
utilisez images.map ((element, i) => {
revenir (
}
source = {élément}
style = {{width: deviceWidth}} />
)
})
essayez ceci
@Emma: cela déclenche un message d'erreur