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通信を利用した方が良い。