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
AndroidでGoogleTagManagerを使いたい

Contents1 GoogleTagManagerとは2 …

large_v
MacでDockerした感想文

Contents1 前提:DockerはLinux上でしか動かない1.1 …

300px-Ruby_logo
Ruby,Railsのチートシート

こういうのブログ形式じゃなくてwikiの方が良いのでは。。 と、遠い目をしつつ。 …

logo_og
ReduxのMiddlewareについて理解したいマン

ReduxのMiddlewareの仕組みがよく分からない。 具体的な処理過程を追いかけて理解に至るまでのメモ。 …

no image
gitであまり使わないけど知らないと困るコマンド一覧

随時追加 originのURLを変更したい …

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

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

no image
Docker導入したらどうするの?

Dockerを導入したけど、nginxが入った環境がどこでも使えるようになった!程度だったらあんま意味ないよね。 Web開発をする上でDockerをどのように使うのが効果的か考えてみる。 …

no image
RubyとSeleniumを使って自動で画像をダウンロードする

Contents1 はじめに2 …

wallpaper.big-j.cs
Androidで超シンプルなWidgetを作りたい

情報が少なくてちょっとつまづいたのでメモ。 Contents1 …

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

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