は私のReactJsアプリケーション

Question

return (
    <Card> 
     <CardHeader 
     title="Full Name" 
     subtitle="@username" 
     avatar="./../assets/img/image.gif" /> 
     <CardText expandable> 
     <div> 
      <p>{message}</p> 
     </div> 
     <div> 
      {tagElements} 
     </div> 
     </CardText> 
    </Card> 
); 
}; 

フォルダ構造で画像を表示することはできません：

- app 
-- assets 
--- img 
---- image.gif 
-- src 

は、私は、画像を表示したいすべてのJSファイルに何かをインポートする必要がありますか？なぜ私はそれが置かれているフォルダを指し示すだけで、それを表示できないのですか？私は何が欠けていますか？

Answer 1

CardHeaderコンポーネントでは、反応したネイティブからImageコンポーネントをインポートし、そのコンポーネントにuri propを渡してレンダリングする必要があります。ここでネイティブに反応してdocumentation for image

import {Image} from 'react-naitve'

一つの落とし穴は、あなたがそれをレンダリングするためには、画像への明示的な幅と高さを提供する必要があるということです。それ以外の場合は、0x0と表示されます。

だからあなたCardHeader内でこのような何かが働くだろう：

<Image style={{width: 50, height: 50}} source={{uri: props.avatar}} />