ITエンジニア/デザイナ向けにオープンソースを毎日紹介

JavaScriptでiOSアプリが作れると聞いて思い出すものはTitaniumではないでしょうか。あの頃はJavaScriptエンジンも速くなく、iOSとAndroidの両方をワンソースでという夢に破れて使うのを止めてしまった人も少なくないでしょう。

さて、その夢再びといった感のあるのがReact Nativeです。既にWebの世界で定評のあるReactをiOS上でも使えるようにしたのがReact Nativeになります。

React Nativeの使い方

まずはデモアプリの2048。

普通に動きます。

iOSネイティブのコンポーネントが使えます。ただしラッピングしたライブラリが必要なので、ライブラリがないコンポーネントは使えません。この点はTitaniumと同じですね。ただ、React Nativeの場合、iOSとAndroidをワンソースでと考えていません(Android版は開発中とのことです)。そのためライブラリの作り手としてもiOS向けだけ作れば良いのは気楽かも知れません。

画像。様々な表示をJavaScriptで制御できます。

ナビゲーター。

スライダー。

ピッカー。

タブ。

アラート。

プッシュ通知。

他のデモです。○×ゲーム。

映画の一覧を表示するデモ。ネットワーク上のデータを取ってきています。

Master-Detail方式で表示できます。

仕組みとしては開発中はnpm startでサーバを立て、iOSアプリ(枠のみ)がサーバから動的にJavaScriptを取得して画面に反映します。そのため、アプリを再コンパイルすることなく反映できます。開発が終わったらJavaScriptのコードをバンドルにし、アプリ内に入れれば良いだけです(ファイルを読み込む修正は必要)。

また、デバッグはiOSシミュレータでコマンド + Dを押します。そうするとGoogle ChromeのDevToolsが立ち上がってブレークポイントを使ったデバッグが可能になります。非常に面白い仕組みではないでしょうか。

使ってみた感じではネットワークのライブラリがJavaScriptそのままとは若干動作が異なるため、Reactで動くものでもそのままではうまく動かせませんでした。しかし今後に大いに期待がかかるライブラリと言えそうです。

React NativeはiOS/JavaScript/node製、BSD Licenseのオープンソース・ソフトウェアです。

React Native | A framework for building native apps using React

facebook/react-native

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2