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
ディープラーニングが気になる

ダラダラとメモ。 Contents1 …

GridViewからRecyclerViewに移行したい

GridViewからRecyclerViewにクラス名変えるだけじゃ動かない。 移行過程をメモ。 …

no image
RubyMine(OSX)でGit操作するときのコマンド集

GITを操作系のポップアップを表示したい

no image
意識低いRuby on Rails再入門6 ~ログイン必須のControllerを作りたい~

ログイン状態を取得するためのSessionsHelperを前に書いた 新規投稿画面を表示したり、実際に投稿するときにはログイン必須であることを保証したい。 …

nokogiriでスクレイピングするときによく忘れるヤツ集

書くことで記憶を定着させる施術。 class,id以外の属性を指定してタグを探したい …

no image
ファイルとかのパーミッションを再帰的に変更したい

あるディレクトリ以下全ファイルのパーミッションを再帰的に変更 chmod …

no image
フロントエンド開発のメモ

最近のフロントエンド開発ではビルドランナーを使うのが常識になってきてるみたいなので。 jspm的なもっと進んだやり方でも良いんだけど、pluginが少ない、文献が少ない、自身の技術力不足、ということでビルドランナーなやり方でやる。 …

Androidアプリで使う画像素材の圧縮をgulpで一括処理する

まず、デザイナーやらディレクターやらプロデューサーやらに『圧縮された画像をgitなどのバージョン管理システム上にコミットしてもらえる』そんな幸福な環境であれば無縁な話。 大概の組織では共有ファイルシステムに新しく追加する、もしくは変更された画像をドカッと置かれて「よろしく」って感じだろう。 …

Docker Machineのメモ

随時追記する Contents1 …

Facebook製の画像ライブラリFrescoのコードを読んでいる

Facebookが新たに画像ライブラリFrescoを公開した。 DraweeView,DraweeController,DraweeHierarchyというクラスを利用したMVC的な構成を成しており、画像を効率よく読み込むようになっているらしい。(雑) …