uri経由で画像が表示されない

Question

Androidエミュレータでテキストと画像を表示しようとしている次のReactネイティブコンポーネントがあります。

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> 
     ); 
    } 
} 

テキストは正しく表示されますが、画像は表示されません。画像のuriが正しいです。

何が問題なのでしょうか？

Answer 1

静的リソースとは異なり、ネットワークリソースの場合、イメージのサイズを手動で指定する必要があります。イメージ・リソースの詳細については

// 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'}} /> 

公式ドキュメントを確認してください。 https://facebook.github.io/react-native/docs/images.html#network-images