Pocket

REST祭 – WordBench大阪&京都&長野@さくらインターネット大阪本社」でReact Nativeの話をしてきました。

スライドはこちら

内容としては、

  • アプリ案ないけどReactNativeやってみたければモック作ればアプリっぽいものができて楽しいよ
  • 必要なのはナビゲーションとUIコンポーネント
  • それができればあとはアイディアが降りてきた時に機能をのせればOK

という感じです。

デモGif

SmartNewsみたいなタブ操作や無限スクロール

wp-react-sample1

個別ページとサムネイルの動き

wp-react-sample2

キーワード検索やタグ検索

wp-react-sample3

細かいところはまだまだ調整中ですが、こんな感じです。

また、スライド内では「React Navigation」と「NativeBase」の2つしか紹介しませんでしたが、実際のデモには追加でいくつか使ってるので紹介。

スライドで紹介してないけど実は使ってたやつ

react-native-parallax-scroll-view

react-native-parallax-scroll-view

下に引っ張ると背景が拡大する動きをつけてくれます。Twitterのプロフィール背景とかで使われてる動きです。デモでは記事詳細ページで使っていました。

これ系のライブラリは他に2つぐらい見かけましたが。使いやすさと機能性でこれを選びました。

react-native-render-html

react-native-render-html

WP REST APIでとってきた記事をReact Nativeでどう表示するかですが、React Nativeが用意してるものであれば、WebViewコンポーネントを使えば表示できるんですが、ここのWebViewでまるっと表示してしまうので、hxとかpとか個々のスタイルをあてるのがめんどいです(一応方法はある)。

そこでこのライブラリを使えば、CSSでタグに直接スタイルを当てられるようになります。これ系のライブラリもいくつかあって試したんですが、最終的にreact-native-render-htmlが一番スタイル当てやすくて選びました。ただ記事内にInstagramの埋め込みがあるとエラーになりますが。。。

また、これを探している時にGitHubで気になるリポジトリがあったので、時間ある時に見てみようと思います。

https://github.com/fauzie811/wp-react-native

react-native-scrollable-tab-view

react-native-scrollable-tab-view

デモの記事カテゴリの切り替えする部分のタブで使っています。

このタブの動きはReactNavigationでもNativeBaseでも用意されてるんですが、ちょっと訳あってこれを使いました。

こちらのライブラリと合わせて使うと、SmartNewsみたいな横スクロールできるタブにしてくれます。

react-native-scrollable-tab-view-mask-bar

できればreact-native-scrollable-tab-view本体で用意して欲しいなと思ってたんですが、同じこと考える人がいるようで作ってくれてました。

さいごに

移転して新しくなったさくらインターネットさんの会場すごく綺麗でした!ここで登壇する機会もらえてよかったです。

また、おまけで紹介した「嫁と旦那どちらの愛が強いか」についての記事はこちら。

嫁と旦那どちらの愛が強いかをグラフ化したサイトを作ってみた

まだまだReact Nativeの勉強中なので何かいい情報あれば教えてください。

Pocket

カテゴリー: