React NativeでAPIから画像を取得して表示する【チュートリアル】

javascriptを使ってiphoneやAndroidアプリを作成できるReact Native

今回は、外部モジュールである「axios」をつかって、WebAPIから画像URLなどの情報を取得して、アプリに描写する方法を紹介します。

もし、環境構築や基本的なComponentの使い方がわからない方は、以下の記事を参照してください。

React Nativeの環境構築はこちらの記事
基本的なReact NativeのComponentの使い方はこちらの記事

画像を表示するようのComponentを作成する

React Native CLIで作成(react-native init)したファイル一式にsrcフォルダを作成し、srcフォルダの中にcomponentを作成していきます。

├── App.js
├── __tests__
├── android
├── app.json
├── index.js
├── ios
├── node_modules
├── package-lock.json
├── package.json
├── src
└── yarn.lock

├── App.js

├── __tests__

├── android

├── app.json

├── index.js

├── ios

├── node_modules

├── package-lock.json

├── package.json

├── src

└── yarn.lock

このようにデフォルトのフォルダやファイル一式に「src」ディレクトリが追加された形です。

rootの位置にあるindex.jsは

import React from 'react';
import { View, AppRegistry } from 'react-native';
import Header from './src/Header';
import ImageList from './src/ImageList';

const App = () => (
  <View>
    <Header showText={'画像一覧'} />
    <ImageList />
  </View>
);

AppRegistry.registerComponent('test', () => App);

import React from 'react';

import { View, AppRegistry } from 'react-native';

import Header from './src/Header';

import ImageList from './src/ImageList';

const App = () => (

<View>

</View>

);

AppRegistry.registerComponent('test', () => App);

このように、Headerコンポーネントと画像一覧を表示するImageListコンポーネントを呼び出して、描写しているだけです。

フォルダ構成

全てのComponentが入っているsrcディレクトリの中身は

├── Header.js
├── ImageList.js
└── ImageMain.js

├── Header.js

├── ImageList.js

└── ImageMain.js

このようになっていて、

Header.js ヘッダーを表示しているだけ（今回は無視してください）
ImageList.js ImageMainコンポーネントの親コンポーネント(このコンポーネントでAPIから情報を取得して、ImageMainコンポーネントに渡す)
ImageMain.js ImageListコンポーネントから受け取ったパラメータを表示する子コンポーネント

という役割になっています。

axiosでデータを取得

今回のお題の１つ「axiosで外部APIからデータを取得する」。

この処理は、ImageListコンポーネントで行うのですが、まずは、axiosでデータ取得している部分だけ、抜き出してみてみましょう。

import axios from 'axios';

class ImageList extends Component {
  state = {
    images: []
  }

  componentWillMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
         .then(res => {
           this.setState({ images: res.data });
         });
  }
}

import axios from 'axios';

class ImageList extends Component {

state = {

images: []

}

componentWillMount() {

axios.get('https://rallycoding.herokuapp.com/api/music_albums')

.then(res => {

this.setState({ images: res.data });

});

}

まずはaxiosを使用することを宣言(1行目)、8〜13行目のcomponentWillMount()内にて、axiosを使います。

componentWillMount

componentWillMountはライフサイクルと呼ばれ、componentの動作のタイミングに合わせて発火されるメソッドです。

componentWillMountはその名の通り、ImageListComponentがアプリにマウント(表示)される前に実行されるメソッドで、表示される前にaxiosで表示したいデータを取得します。

axios

axiosは

GETやPOSTなどのHTTPリクエストの種類
アクセスするURL
パラメータ

を指定して、APIにアクセスするモジュールで、今回は

「GET」メソッドにて、「https://rallycoding.herokuapp.com/api/music_albums」にノーパラメータでアクセスしています。

その結果を、then()のなかで利用して、取得したデータをstateに保持します。

※今回使用したAPIはUdemyでReact Native講座の人気講師「Stephen Grider」氏のものです。非常にわかりやすい授業なので、めっちゃくちゃオススメですよ！！

取得したデータをrenderする

import React, { Component } from 'react';
import { ScrollView, Text } from 'react-native';
import axios from 'axios';
import ImageMain from './ImageMain';

class ImageList extends Component {
  state = {
    images: []
  }

  componentWillMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
         .then(res => {
           this.setState({ images: res.data });
         });
  }

  renderImages() {
    return this.state.images.map(data => {
      return <ImageMain key={data.titlet} imageInfo={data} />
    });
  }

  render() {
    return (
      <ScrollView>
        {this.renderImages()}
      </ScrollView>
    )
  }
}

export default ImageList;

import React, { Component } from 'react';

import { ScrollView, Text } from 'react-native';

import axios from 'axios';

import ImageMain from './ImageMain';

class ImageList extends Component {

state = {

images: []

}

componentWillMount() {

axios.get('https://rallycoding.herokuapp.com/api/music_albums')

.then(res => {

this.setState({ images: res.data });

});

}

renderImages() {

return this.state.images.map(data => {

return <ImageMain key={data.titlet} imageInfo={data} />

});

}

render() {

return (

{this.renderImages()}

</ScrollView>

)

}

export default ImageList;

ImageList.jsの全てのソースはこういった形です。

axiosで取得したデータを、renderImagesメソッドで使いやすいデータに変換して、ImageMainコンポーネントに渡します。

画像をアプリに描写する

ImageMainコンポーネントは非常にシンプルで、

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

const ImageMain = ({ imageInfo }) => {
  const { title, image } = imageInfo;
  const { imageStyle, textStyle, wrapperStyle } = styles;
  return (
    <View style={wrapperStyle}>
      <Text style={textStyle}>{title}</Text>
      <Image
        source={{ uri: image }}
        style={imageStyle}
      />
    </View>
  )
}

const styles = {
  wrapperStyle: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    padding: 20
  },
  imageStyle: {
    height: 300,
    flex: 1,
    width: null
  },
  textStyle: {
    fontSize: 18,
    fontWeight: "600"
  }
}

export default ImageMain;

import React, { Component } from 'react';

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

const ImageMain = ({ imageInfo }) => {

const { title, image } = imageInfo;

const { imageStyle, textStyle, wrapperStyle } = styles;

return (

<Text style={textStyle}>{title}</Text>

<Image

source={{ uri: image }}

style={imageStyle}

</View>

)

}

const styles = {

wrapperStyle: {

flexDirection: 'column',

justifyContent: 'space-between',

padding: 20

imageStyle: {

height: 300,

flex: 1,

width: null

textStyle: {

fontSize: 18,

fontWeight: "600"

}

export default ImageMain;

ImageList(親)コンポーネントから渡されたデータをタグにはめ込んでいくだけです。

View HTMLのdivのようなもので、汎用的に要素をラップする
Text HTMLのpのようなもので、テキストを表示するときに使う
Image HTMLのimgのようなもので、画像を描写するときに使う

このように、ReactNative独特の記法に慣れてしまえば、問題ありません。

ただ、１点だけ注意しなければならないことがあります。それは、

「ReactNativeでは画像にwidthとheightをつけなければならないこと」

Web制作出身者は見落としがちなポイントなので意識して制作しましょう。

画像一覧がスクロールして表示される

以上のソースを記述して、simulatorを起動すれば、

このように、画像とタイトルが一覧のリストが表示されます。

マウスで上下にドラッグ・アンド・ドロップすれば、ちゃんとアプリを指で操作しているみたいに、画面がスクロールして表示されます。

※ImageList.jsで「View」ではなく、「ScrollView」を使っている理由はViewにするとスクロールができなくなるため。

アプリづくりもちょろいちょろい！

外部のAPIから情報を取得して、アプリに画像を描写するフローはいかがでしたでしょうか？

意外と簡単じゃないですか？

わたし自身、アプリづくりには苦手意識があったのですが、こうやって少しずつ勉強していくと、ドンドン苦手意識がなくなり、逆に楽しくなってきています。

みなさんもどうぞアプリ制作にチャレンジしてみてください！

サンプルファイル(完成品)

https://github.com/rara-tan/react-native-axios-image-list

今回作成したアプリのソース一式を上記のgithubにアップしてありますので、興味のある方は是非＾＾

カテゴリー

React Nativeでaxiosを使ってWebAPIから画像を取得して表示する【チュートリアル】

画像を表示するようのComponentを作成する

フォルダ構成

axiosでデータを取得

componentWillMount

axios

取得したデータをrenderする

画像をアプリに描写する

画像一覧がスクロールして表示される

アプリづくりもちょろいちょろい！

サンプルファイル(完成品)

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

vuetifyをvue.jsに導入する際に、【no such file or…

【Typescript】呼び出しシグネチャと省略記法の書き方

React.jsのprops.childrenとはなにか？javascrip…

firebase認証のonAuthStateChangedはどこでログイン状…

プロフィール

最近の投稿

アーカイブ

カテゴリー

カテゴリー

画像を表示するようのComponentを作成する

フォルダ構成

axiosでデータを取得

componentWillMount

axios

取得したデータをrenderする

画像をアプリに描写する

画像一覧がスクロールして表示される

アプリづくりもちょろいちょろい！

サンプルファイル(完成品)

RECOMMENDこちらの記事も人気です。

javascriptでネイティブアプリが作れるReact Nativeの…

【react-native-router-flux】React Nati…

【チュートリアル】ReactNativeで簡単にネイティブアプリ(iph…

ログインフォーム(認証機能)で覚えるReact NativeのReact…

【React Native】react-native-router-fl…

React NativeとFirebaseを使って、iosアプリのログイ…

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

vuetifyをvue.jsに導入する際に、【no such file or…

【Typescript】呼び出しシグネチャと省略記法の書き方

React.jsのprops.childrenとはなにか？javascrip…

firebase認証のonAuthStateChangedはどこでログイン状…

プロフィール

最近の投稿

アーカイブ

カテゴリー