【React Native】Imageコンポーネントを使った画像の表示方法

Reactのチュートリアルを終え、ひととおり基本的な概念を理解したので、本来の目的であったアプリ開発に向けてReact Nativeの勉強を始めた。

勉強を進める中で、画像の表示方法だけでも通常のReactとだいぶ違いがあったので、まずはReact Nativeにおける画像の表示方法をここにまとめる。

Imageコンポーネントのインポート

画像を表示する際はJSXでImageタグを使うのだが、これにあたってまずImageコンポーネントをインポートする必要がある。

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

ローカルに保存した画像を表示する

React Nativeでは、ローカルファイルとオンライン上のファイル、それぞれでファイルパスの指定方法が違う。

ローカルに保存した画像を表示する場合は、以下のとおりrequire()を使用し相対パスで指定する。

また、Imageコンポーネントは必ずサイズの指定が必要となるため、以下の例ではstyle属性に直接値を指定している。

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Image
          style={{
            width: 64,
            height: 64
          }}
          source={require('./assets/sample.png')}
        />
      </View>
    );
  }
}

オンライン上の画像を表示する

オンライン上のファイルを表示する場合は、以下のとおり絶対パスで指定する。

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Image
          style={{
            width: 64,
            height: 64
          }}
          source={{uri: 'https://example.com/img/sample.png'}}
        />
      </View>
    );
  }
}

なお、iOSではセキュリティ上の理由でHTTP通信を原則として許可していないため、HTTPS経由での参照が推奨される。

XCodeの設定によりHTTP通信を許可することも可能だが、アプリをリリースする際にAppleに対しHTTPSを利用できない理由を説明する必要があるとのことなので、極力HTTPS通信を利用した方が良い。