ReactNativeで引っ張ってデータ更新

APIの準備

とりあえず/api/whattimeというリクエストで現在の時間を返すAPIを実装します。言語は何でも。

{"status":"OK","date":"2018-10-29 23:37:59"}

Laravelでのサンプル

私はLaravelで下記のように実装してみました。

web.api

Route::get('/whattime',function(){
    $res['status'] = 'OK';
    $res['date'] = date('Y-m-d H:i:s');
    return \Response::json($res);
});

ReactNativeでの実装

Mountされたときの日時になっていますが、引っ張ると更新されます。
ポイントはonRefresh()が実装されたコンポーネントを利用すること。FlatListとかでもいいのですが、今回はListではなく普通のテキストを更新したかったのでScrollViewを利用してみました。

App.js

import React from 'react';
import { StyleSheet, Text, View, ScrollView, RefreshControl } from 'react-native';

export default class App extends React.Component {

  state = {
    refreshing: false,
    status: 'N/A',
    datetime: '0000-00-00'
  }

  componentDidMount(){
    this._fetch();
  }

  _fetch = () => {
    fetch('http://localhost:8000/api/whattime')
      .then((response) => {
        this.setState({
          refreshing: true
        });
        return response.json();
      })
      .then((responseJson) => {
        this.setState({
          refreshing: false,
          status: responseJson['status'],
          datetime: responseJson['date']
        });
      })
      .catch((error) => console.log(error));
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={() => this._fetch()}
            />
          }
        >
          <Text>Status:{this.state.status}</Text>
          <Text>DateTime:{this.state.datetime}</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical:60,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

確認

こんな感じ。（○がでてるのが関係ないです）。

メモ

最後まで来たら追加ロードとかも簡単にできます。便利。