React Native基礎

Imageコンポーネント

Imageコンポーネント

画像を表示するにはImageコンポーネントを使用します。画像はPNGやJPEGを読み込むことができます。GIFも読み込めますがAndroidではデフォルトで機能がオフにされているのでPNGかJPEGを使うのがいいでしょう。

表示する画像は次のどちらかの方法で指定します。

画像ファイルのURLを指定する（HTMLでimgのsrc属性を指定するのと同様）。
sourceプロパティにオブジェクトを渡し、オブジェクトのuriプロパティで画像のURLを指定します。プロパティは「uri」なので注意してください。また、JSXの{ }とオブジェクトの{ }と中カッコを二重で書く必要がある点も注意が必要です（中カッコが一重だとVisual Studio Codeの補完が適切に働かないため書き間違いに気づけます）。また、要素の幅（width）と高さ（height）を明示する必要があります（自動的に取得した画像の幅と高さにはなりません）。幅と高さはsourceで指定するオブジェクト、またはスタイルとして設定します。

<Image 
  source={{
    uri: 'https://reactnative.dev/img/tiny_logo.png',
    width: 64, height: 64
  }} 
/>

アプリのプロジェクトフォルダー内に用意している画像をインポートし、sourceプロパティで指定する。この場合は幅と高さの指定は必要ありません。
※画像をインポートすると値としてリソース番号が返され、Imageコンポーネントがリソース番号に対応するファイルを読み込むという仕組みのようです。

// 使う画像をインポートしておく
import favicon from './assets/favicon.png';

// インポートした内容をsourceプロパティで指定
<Image source={favicon} />