javascriptを使ってiphoneやAndroidアプリを作成できるReact Native
今回は、外部モジュールである「axios」をつかって、WebAPIから画像URLなどの情報を取得して、アプリに描写する方法を紹介します。
もし、環境構築や基本的なComponentの使い方がわからない方は、以下の記事を参照してください。
画像を表示するようのComponentを作成する
React Native CLIで作成(react-native init)したファイル一式にsrcフォルダを作成し、srcフォルダの中にcomponentを作成していきます。
1 2 3 4 5 6 7 8 9 10 11 |
├── App.js ├── __tests__ ├── android ├── app.json ├── index.js ├── ios ├── node_modules ├── package-lock.json ├── package.json ├── src └── yarn.lock |
このようにデフォルトのフォルダやファイル一式に「src」ディレクトリが追加された形です。
rootの位置にあるindex.jsは
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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); |
このように、Headerコンポーネントと画像一覧を表示するImageListコンポーネントを呼び出して、描写しているだけです。
フォルダ構成
全てのComponentが入っているsrcディレクトリの中身は
1 2 3 |
├── Header.js ├── ImageList.js └── ImageMain.js |
このようになっていて、
- Header.js ヘッダーを表示しているだけ(今回は無視してください)
- ImageList.js ImageMainコンポーネントの親コンポーネント(このコンポーネントでAPIから情報を取得して、ImageMainコンポーネントに渡す)
- ImageMain.js ImageListコンポーネントから受け取ったパラメータを表示する子コンポーネント
という役割になっています。
axiosでデータを取得
今回のお題の1つ「axiosで外部APIからデータを取得する」。
この処理は、ImageListコンポーネントで行うのですが、まずは、axiosでデータ取得している部分だけ、抜き出してみてみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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; |
axiosで取得したデータを、renderImagesメソッドで使いやすいデータに変換して、ImageMainコンポーネントに渡します。
画像をアプリに描写する
ImageMainコンポーネントは非常にシンプルで、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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; |
ImageList(親)コンポーネントから渡されたデータをタグにはめ込んでいくだけです。
- View HTMLのdivのようなもので、汎用的に要素をラップする
- Text HTMLのpのようなもので、テキストを表示するときに使う
- Image HTMLのimgのようなもので、画像を描写するときに使う
このように、ReactNative独特の記法に慣れてしまえば、問題ありません。
ただ、1点だけ注意しなければならないことがあります。それは、
「ReactNativeでは画像にwidthとheightをつけなければならないこと」
Web制作出身者は見落としがちなポイントなので意識して制作しましょう。
画像一覧がスクロールして表示される
以上のソースを記述して、simulatorを起動すれば、

このように、画像とタイトルが一覧のリストが表示されます。
マウスで上下にドラッグ・アンド・ドロップすれば、ちゃんとアプリを指で操作しているみたいに、画面がスクロールして表示されます。
※ImageList.jsで「View」ではなく、「ScrollView」を使っている理由はViewにするとスクロールができなくなるため。
アプリづくりもちょろいちょろい!
外部のAPIから情報を取得して、アプリに画像を描写するフローはいかがでしたでしょうか?
意外と簡単じゃないですか?
わたし自身、アプリづくりには苦手意識があったのですが、こうやって少しずつ勉強していくと、ドンドン苦手意識がなくなり、逆に楽しくなってきています。
みなさんもどうぞアプリ制作にチャレンジしてみてください!
サンプルファイル(完成品)
https://github.com/rara-tan/react-native-axios-image-list
今回作成したアプリのソース一式を上記のgithubにアップしてありますので、興味のある方は是非^^