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
いろいろ頑張ってビルドしてくれてますが、シミュレータが起動するまでは早いです。
ビルドが終わりアプリが立ち上がると、シミュレータは以下のような表示になります。
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も勝手に立ち上げてくれると思っていた。。。
エミュレータを立ち上げた状態で、再度コマンドを叩くとビルドされたアプリがエミュレータ上に表示されました。
とりあえず触ってみる
App.jsがメインのプログラムのようなので、こちらを修正してみます。
Welcome to React Native
となっている部分を うぇるかむ とぅ りあくと ねいてぃぶ
に変えてみます。
その後シミュレータ上でCmd+Rで画面更新してみると更新されました。
毎回ビルドしなくていいというのは、スピード感が失われないのでうれしいですね。
さらにCmd+Rを押さずとも自動リロード出来る機能もあるようです。
シミュレータ上でCmd+Dを押して Enable Hot Reloading
を選択してください。
そうすると、同じように文章を変えると、Cmd+Rを実行しなくても画面が更新されるようになりました。
React-Native面白いですね!
もうちょっと触ってみます!
ではでは。