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

  関連記事

logo_og
ReduxのcombineReducersの仕組みについて理解したいマン

Redux Reduxでは、関心毎に複数のReducerを作っておきcombineReducersで1つのReducerにまとめた後createStoreする、という風習がある。 …

wallpaper.big-j.cs
Facebook製の画像ライブラリFrescoのコードを読んでいる

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

no image
Androidアプリを作るために最低限必要な知識と未知の部分を列挙

作りたいアプリによって必要な知識は変わるかもしれないが。。 個人的過ぎて役に立たないが、整理がてら羅列してみる。 …

no image
SwiftでOSのバージョンが8.0.0以下とそれより大きいヤツで処理を分岐させたい

前置き push通知のデバイストークン取得方法がiOS8から変わりました。 …

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

http://railstutorial.jp/chapters/sign-in-sign-out?version=4.0#top この辺を読んだメモ。 …

large_v
Dockerでよく使うコマンド

随時追加 Contents1 …

no image
[WIP]AndroidでParseを使ってみる

今更感溢れてるが。 バックエンドな実装・運用は面倒くさい、Railsとか使い方分からない、的な人はParse良いかもしれない。 …

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

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

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

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

no image
Python(Anaconda)とOpenCVを使って動画から顔画像を抽出してみる

今話題のディープラーニングをやってみたい。 いろいろ見た感じCaffeというフレームワークが良さそう。 …