moxt

Just another Blog site

ReactNativeでGiphyのデータを表示する

      2016/03/27

まずは下記をサクッとパクってみる。
当方、比較的AndroiderなのでAndroidで。

ReactNativeでサクッとReactjs記事リーダーを作ってみる – Qiita


環境設定やらプロジェクトの作り方は公式のドキュメントを見ればおk。

取得したデータを表示するだけ

  • fetchでデータを取得する
  • 取得したデータをListViewDataSourceに格納
  • データを適切に描画

こんな感じのものができる
所要時間は9割9分コピペなので10分くらい。

https://gyazo.com/5c144e35131ac0e387072a2c36ebb91c

ViewPagerとTabを追加してみる

ViewPagerはViewPagerAndroidを使えばイケるが、Tabはサポートされてないっぽい。

brentvatne/react-native-scrollable-tab-view

↑これを使えばイケる。

ScrollableTabViewのインスタンスを作って、中にページングしたいViewたちを突っ込んでゆくだけ。
tabLabelっていうプロパティを設定するだけ(下記の例だとGiphyList側で実装しておく必要がない!)でラベルも表示してくれる。
便利。

↓こんな感じで動作

https://gyazo.com/0c12260d3f2ff2dcd69fe081613a6977

感想

  • Androidで言うところのmatch_parentのやり方が分からない
  • fetchDataのようなAPI通信する処理は別クラスにしたいが、別クラスにした場合EventBus的な感じにしてデータ取得の通知を受け取るべきなのか、promiseを返すようにしておくべきなのか、この辺の勘所が謎
  • 公式ではサポートされてないコンポーネントがあるのでググッて見つけるか、作らないといかん

 - Android, javascript, プログラミング

  • このエントリーをはてなブックマークに追加
  • follow us in feedly