React Native 入門してみた③ Httpアクセス編

React Native 入門してみた② 画面遷移編 につづいて今回はHttpアクセスについての入門です。

Httpアクセス

APIから取得し表示する場合のサンプルを試して見ました。
Web開発となんら変わらず実装できました。(特に試さんでもよかったな...)
必要なければ飛ばして下さい。。。

Httpアクセスに人気の高いaxiosを使用します。
実際にHttpアクセスをしたいので、Mockサーバーにjson-serverを使用します。

ライブラリ名	バージョン	備考
axios	0.18.0
json-server	0.14.2

axiosについては下記記事を参考にして下さい。

• axiosの記事を添付

json-serverについては下記記事を参考にして下さい。

• json-severの記事を添付

インストール

まずは、axiosとjson-serverのインストールをします

npm install axios json-server 

実装

構成

src
├── App.tsx
├── app.json
├── assets
├── babel.config.js
├── mock
      └── db.json
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

今回は、json-server用のmock/db.jsonをメインのApp.tsxを追加・編集します。

モックの用意

json-serverで使用する為のjsonを用意します

mkdir mock
touch db.json

db.jsonに追加します

{
  "movies": [
    {
      "id": 1,
      "name": "The Godfather",
      "director": "Francis Ford Coppola",
      "rating": 9.1
    },
    {
      "id": 2,
      "name": "Casablanca",
      "director": "Michael Curtiz",
      "rating": 8.8
    },
    {
      "id": 3,
      "name": "Inception",
      "director": "Christopher Nolan",
      "rating": 9
    }
  ]
}

json-server --watch mock/db.jsonでモックサーバーを起動できます。
http://localhost:3000/moviesでmoveies一覧を取得できます。

画面の実装

App.tsxを修正します
http://localhost:3000/moviesにアクセスしてmovies一覧を取得し、画面に表示するサンプルを開発します

App.tsx

import React from 'react';
...
import axios from 'axios';

type Movie = {
  id: number,
  name: string
}

type Props = {}

type State = {
  movies: Array<Movie>
}

export default class App extends React.Component<Props, State> {

  constructor(props: Props) {
    super(props)
    this.state = {
      movies: []
    }
    // Movie一覧取得
    axios.get("http://localhost:3000/movies").then((res) => {
      this.setState({ movies: res.data })
    });

  }

  // Movie一覧描画
  _rederMovies() {
    if (Object.keys(this.state.movies).length <= 0) {
      return null;
    }
    return (
      <View>
        {this.state.movies.map(movie =>
          <Text key={movie.id}>{movie.name}</Text>
        )}
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Movies</Text>
        {this._rederMovies()}
      </View>
    );
  }
}

...

サンプルコードの解説

...
  constructor(props: Props) {
    super(props)
    this.state = {
      movies: []
    }
    // Movie一覧取得
    axios.get("http://localhost:3000/movies").then((res) => {
      this.setState({ movies: res.data })
    });

  }
...  

movies一覧を取得するのにconstructorで、axiosを使用してmovies一覧を取得、stateに登録しています。
renderは映画名を<Text/>で表示するだけの単純な描画です。
なんら問題なくaxiosで取得できました。

Next

続いては、React Native 入門してみた④ カメラ実装編です。