React-Native触ってみた

Web+Db Press vol102で紹介されていたReact-Nativeを触ってみました。

ちょうど仕事でもアプリ開発を求められる可能性が出てきているので、先に素振りしておきたいと思ったので、ちょうど良かったです。

ではスタート。

参考サイト

https://qiita.com/ponnjinnka/items/006b632a0b56369451b9

React-Native Install

以下のコマンドでインストールします。

npm install -g react-native-cli

react-nativeのコマンドが使用できるようになります。

このブログ作成時の最新バージョンはv0.51.0でした。

サンプルアプリ(雛形)を作成

以下のコマンドで作成します。

react-native init --version='バージョン' プロジェクト名

バージョンは指定しない場合、最新のバージョンが設定されるようです。

実行すると色々と表示され、インストールを頑張ってくれます。

以下が表示されれば完了です。

To run your app on iOS:
   cd /path/to/プロジェクト名
   react-native run-ios
   - or -
   Open ios/プロジェクト名.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /path/to/プロジェクト名
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

iosシミュレータ起動

以下のコマンドを実行します。

cd /path/to/プロジェクト名 react-native run-ios

いろいろ頑張ってビルドしてくれてますが、シミュレータが起動するまでは早いです。

f:id:kojirooooocks:20171228012932p:plain

ビルドが終わりアプリが立ち上がると、シミュレータは以下のような表示になります。

f:id:kojirooooocks:20171228012905p:plain

Androidシミュレータ起動

以下のコマンドを実行します。

cd /path/to/プロジェクト名
react-native run-android

iosのビルド同様、頑張ってビルドしてくれます。

しかし自分の環境ではエラーが出ました。

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

ANDROID_HOMEというandroid-sdkまでのパスを格納する環境変数がセットされてないみたいです。

ということで環境変数をセットして再度実行

ANDROID_HOME=/path/to/Android/sdk react-native run-android

更に違うエラーが発生。

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

調べたところAndroidの場合はエミュレータを先に立ち上げておく必要があるみたいです。

iosは立ち上げてくれたからandroidも勝手に立ち上げてくれると思っていた。。。

エミュレータを立ち上げた状態で、再度コマンドを叩くとビルドされたアプリがエミュレータ上に表示されました。

f:id:kojirooooocks:20171228012957p:plain

とりあえず触ってみる

App.jsがメインのプログラムのようなので、こちらを修正してみます。

Welcome to React Native となっている部分を うぇるかむ とぅ りあくと ねいてぃぶ に変えてみます。

その後シミュレータ上でCmd+Rで画面更新してみると更新されました。

f:id:kojirooooocks:20171228013021p:plain

毎回ビルドしなくていいというのは、スピード感が失われないのでうれしいですね。

さらにCmd+Rを押さずとも自動リロード出来る機能もあるようです。

シミュレータ上でCmd+Dを押して Enable Hot Reloading を選択してください。

そうすると、同じように文章を変えると、Cmd+Rを実行しなくても画面が更新されるようになりました。

React-Native面白いですね!

もうちょっと触ってみます!

ではでは。