React
reactnative

ReactNativeを使ってみる

More than 1 year has passed since last update.


ReactNativeとは

ReactNative http://facebook.github.io/react-native/

ReactNativeとはReactjsベースでネイティブアプリを構築できるSDK(プラットフォーム?)で、Facebookが作っています。FacebookやInstagram, AirBnBなどのアプリがReactNativeで書かれているらしいです。

現在はiOS, Androidともに動かせるようになっている(v0.45.0現在)

内部ではJavaScript のコードがコンパイルされてネイティブコードになるわけではなく、内部に JavaScript ランタイム (JavaScriptCore) があって JS はそのランタイム上で動く。

内部には Objective-C で書かれた、JS <=> ネイティブブリッジの実装があり JavaScript ランタイムからはそのブリッジが呼ばれて、UIKit の各種コンポーネントや iOS ネイティブの API が呼ばれるようになっている。

JavaScript ランタイムの実行とネイティブコードは、ドキュメントをみる限り非同期で実行されていて各種ネイティブモジュール群も別スレッドで動いており、パフォーマンス的な劣化はそれほど大きくないと謳っている。


開発環境

Document参照

http://facebook.github.io/react-native/docs/getting-started.html#content


  • Mac OS X

  • Xcode(最新推奨)

  • 適当なエディタ


準備

brew install node


  • watchmanをインストール(bug監視のため)

brew install watchman


  • flowをインストール(使いたかったら。。。flowはtype errorをチェックしてくれるツールです)

brew install flow


  • reactNativeをグローバルにインストール

npm install -g react-native-cli


  • 作りたいディレクトリに移動し、プロジェクトを作成

react-native init hogeProject

ここでなんと僕の場合


zsh: command not found: react-native



ふぁっ!?

sudoしてもプロジェクト立てるディレクトリでnpm initしてもダメ。。。

どうやらこちらの記事http://qiita.com/umechiki/items/a1de903a2e5e27f5c606

にあるようにPATHが通ってなかったみたいです。(gulpとかは動くのに、、、なぜ?)

if [ -d ${HOME}/node_modules/.bin ]; then

export PATH=${PATH}:${HOME}/node_modules/.bin
fi

を入れて

source ~/.zshenv

これで再びコマンドを叩くとプロジェクトを立てることが出来ました。

その後、プロジェクトのディレクトリ内で

$ cd hogeProject

$ npm i <--これでnode_modulesをインストール
$ react-native link


はじめてみる

できたプロジェクトの中から


hogeProject.xcodeproj

というのを起動

とりあえず実行してみると

welcome to React Native

みたいなページがiOSシュミレータで立ち上がります。


立ち上がらない場合はターミナルから

$ react-native run-ios

を実行してみてください

起動するときにターミナルが立ち上がると思いますがこのターミナルは閉じてはいけません。もし閉じてしまった時にはXcodeからもう一度ビルドしましょう。


参考ページ

これからどんどん使ってみるのでなんかあったら追記していきます