はじめてのVue Native

Vue でネイティブアプリが開発できる Weex を以前触ってみましたが,気づいたら Vue Native というのが登場していました.

パッケージのインストール

terminal

$ npm install -g react-native-cli
$ npm install -g create-react-native-cli
$ npm install -g vue-native-cli

各種パッケージをグローバルにインストールします.

プロジェクトの初期化

terminal

$ vue-native init vue-native-test
$ vue-native init vue-native-test-no-crna # create-react-native-app を使わない

今回は上のコマンドで試しました.

crna を使うと Expo.io で起動できるのが楽です.

起動

Windows

terminal

$ npm start

npm start するとオプションを選択できますが,npm run android で直接 Android デバイスやエミュレータを起動することもできます.

が,以下のエラーが解決に至らず,実行できていません.

adb 関連のエラー

Error running adb: No Android device found. Please connect a device and follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

Android デバイスを直接接続すると Expo がインストールされて起動まではいきますが,java.net.SocketTimeoutException により実行できず...

調べてみるとファイアウォールが悪さしてる感じがしましたが,Windows PC のほうはマカフィーが入っており,Windows Defender のファイアウォールが無効化されているのでいじるのをやめました.

また,Android エミュレータも入っているのですが,これも起動せず.デバイスとエミュレータの切り替えはどのようになっているのかよくわかっていません.

Mac

watchman を入れるようにエラーが出たので,最初に入れておきます.

terminal

$ brew install watchman
$ npm start

こちらは Android 実機と iOS エミュレータを試しましたが,ちゃんと動作しました.

Android 実機を使うために,Android File Transfer を入れています.

最後に

確かにビルドするのが簡単で使いやすく,チュートリアル的にはいいのかもしれませんが,Expo に依存する環境で開発したものをどう単体のアプリとしてビルドするのかがいまいち明瞭でない気がしました.(追記)GitHub に書いてました.

参考