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

  関連記事

no image
『Tutorial & Hackathon #1』をやってみる

https://pydata.tokyo/news/pydata.tokyo-tutorial-hackathon-1 タイタニックの乗客データから生存者の推定モデルを作成してる。 …

no image
SeleniumでChromeを自動操作したい

Seleniumという便利なソフトウェアがあります。 これはブラウザ上の操作をスクリプト化し自動化することを目的としています。 …

no image
Bower再入門

Contents1 Bowerとは何なのか2 …

no image
意識低いRuby on Rails再入門2

Modelを作り、コンソール上からデータを追加した。 次はこのデータをlocalhost:3000にアクセスしたときに表示させてみたい。 …

no image
GrowthPushのAndroid-SDK(?)のコードを読んでみる

できること、できないことを知るために。 GrowthPush.java …

コードを雑に読むアプローチでScrapyを入門する

Scrapyはスクレイピング用フレームワークなので、登場人物多すぎてよく分からない。 彼らの関係性や役割を理解を深めるために『Data …

ReactなComponent同士を連携させたい

実践的なサンプルに塗れてなんとなく使ってると破綻する。 分かってること、分かってないことを整理しておきたい。 …

Chef::Exceptions::ChecksumMismatch:というエラーの対処

今頃になってChefの話。 チェックサムの形式をミスってる可能性がある。 …

no image
Androidアプリを実機デバッグしたいのにNo debuggable applicationsと表示される時の対処例

Tools > …

no image
goで無限ループ

しょうもないが忘れるので。。