1

Mon Réducteur:Impossible d'afficher l'image de l'état Redux dans ReactNative

const initialState = { 
    1: { 
    id: '1', 
    name: 'AryaStark', 
    theimage: "https://upload.wikimedia.org/wikipedia/en/3/39/Arya_Stark-Maisie_Williams.jpg" 
    }, 
    2: { 
    id: '2', 
    name: 'SansaStark', 
    theimage: "https://upload.wikimedia.org/wikipedia/en/7/74/SophieTurnerasSansaStark.jpg" 
    } 
} 

Je suis en mesure de montrer reste du contenu, mais pas l'image. Mon code:

const renDataNew = Object.keys(this.props.newData).map((key, idx) => { 
    let data = this.props.newData[key] 
    return (
     <View key={idx} style={styles.myStyle1}> 
     <Text style={styles.myStyle2}>{data.id} - {data.name}</Text> 
     <Image 
     style={{width: '100%', height: 600}} 
     source={{uri:{data.theimage}}} //<= Error here expecting a , 
     /> 
     </View> 

Si j'utilise l'URL dans theimage directement dans la source uri de Image, cela fonctionne. Qu'est-ce que je fais mal?

Quelle est la bonne façon d'afficher l'image? Merci beaucoup.

Répondre

1

Je pense qu'il devrait être:

<Image 
    style={{width: '100%', height: 600}} 
    source={{ uri: data.theimage }} 
/> 

Vous n'avez pas besoin {} supplémentaire autour de l'objet data.

+0

Merci beaucoup! Cela a réellement fonctionné. Pourquoi n'aurai-je pas besoin des accolades autour du 'data.theimage'? – Somename

+1

Dans l'exemple, vous créez un objet invalide, c'est une erreur de syntaxe. La deuxième chose est que Image dans [source] (https://facebook.github.io/react-native/docs/image.html#source) prop accepte la source de l'image en tant que String not Object. – mradziwon