ReactNativeでGiphyのデータを表示する
2016/03/27
まずは下記をサクッとパクってみる。
当方、比較的AndroiderなのでAndroidで。
ReactNativeでサクッとReactjs記事リーダーを作ってみる – Qiita
環境設定やらプロジェクトの作り方は公式のドキュメントを見ればおｋ。
取得したデータを表示するだけ
- fetchでデータを取得する
- 取得したデータをListViewDataSourceに格納
- データを適切に描画
こんな感じのものができる
所要時間は9割9分コピペなので10分くらい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var Dimensions = require('Dimensions'); var {width} = Dimensions.get('window'); var { AppRegistry, StyleSheet, View, ListView, Image, } = React; var FirstReactNative = React.createClass({ render: function() { return ( <GiphyList style={styles.container}/> ); } }); var GiphyList = React.createClass({ getInitialState: function() { return { items: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), }; }, componentDidMount: function() { this.fetchData(); }, render: function() { return ( <ListView dataSource={this.state.items} renderRow={this.renderItem}/> ); }, renderItem: function(item, sectionId, rowId) { return ( <View style={styles.container}> <Image source={{uri: item.images.downsized.url}} style={this.calculateImageStyle(item.images.downsized_still)}/> </View> ); }, fetchData: function() { fetch('http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC') .then((response) => response.json()) .then((responseData) => { this.setState({ items: this.state.items.cloneWithRows(responseData.data), }) }) .done(); }, calculateImageStyle: function(item_still) { return { width: width, height: this.calculateImageDimensions(item_still), } }, calculateImageDimensions: function(item_still) { return (item_still.height * width) / item_still.width; }, }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); AppRegistry.registerComponent('FirstReactNative', () => FirstReactNative); |
ViewPagerとTabを追加してみる
ViewPagerはViewPagerAndroidを使えばイケるが、Tabはサポートされてないっぽい。
brentvatne/react-native-scrollable-tab-view
↑これを使えばイケる。
ScrollableTabViewのインスタンスを作って、中にページングしたいViewたちを突っ込んでゆくだけ。
tabLabelっていうプロパティを設定するだけ（下記の例だとGiphyList側で実装しておく必要がない！）でラベルも表示してくれる。
便利。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var ScrollableTabView = require('react-native-scrollable-tab-view'); var ReactGiphy = React.createClass({ render: function() { return ( <View style={styles.root}> <ScrollableTabView> <GiphyList tabLabel="cat" query='funny+cat'/> <GiphyList tabLabel="dog" query='funny+dog'/> </ScrollableTabView> </View> ); } }); |
↓こんな感じで動作
感想
- Androidで言うところの
match_parentのやり方が分からない fetchDataのようなAPI通信する処理は別クラスにしたいが、別クラスにした場合EventBus的な感じにしてデータ取得の通知を受け取るべきなのか、promiseを返すようにしておくべきなのか、この辺の勘所が謎- 公式ではサポートされてないコンポーネントがあるのでググッて見つけるか、作らないといかん
