L'image via uri n'est pas affichée

Question

J'ai le composant React Native suivant dans lequel j'essaie d'afficher du texte et une image dans un émulateur Android.

import React from 'react'; 
import { Image, Text, View } from 'react-native'; 

export default class ListItem extends React.Component { 
    render() { 
     return (
      <View> 
       <Text> "Some text" </Text> 
       <Image 
        source={{uri: "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"}} 
       /> 
      </View> 
     ); 
    } 
} 

Le texte s'affiche correctement mais l'image n'est pas affichée. Le uri pour l'image est correct.

Une idée de ce qui pourrait être le problème?

Answer 1

Contrairement aux ressources statiques, pour les ressources réseau, vous devrez spécifier manuellement les dimensions de votre image.

// GOOD 
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
     style={{width: 400, height: 400}} /> 

// BAD 
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} /> 

Pour plus d'informations sur les ressources de l'image, consultez la documentation officielle: https://facebook.github.io/react-native/docs/images.html#network-images