iOS,Androidのアプリ制作を行うためにReact Nativeの環境構築を行います。
公式
$ node -v v11.6.0
$ npm -v 6.5.0
要求は
node >= 6.0
npm >= 4.0
なのでこれより低かったりインストールされてなければ新しいバージョンを入れましょう。
nodeバージョン管理
Vue NativeはReact Nativeのラッパーなのでそちらも必要になります。インストール手順はこちら。
React Nativeでのやり方は2つありますが、(no crnaというオプションもありますが)通常は片方しかインストールしていない場合はもう一方もインストールしておきましょう。
$ npm install -g react-native-cli $ npm install -g create-react-native-app
さていよいよVue Nativeをいれていきます。とはいってもここまできていたらあと少しです!
$ npm install -g vue-native-cli
これでインストールは完了です!
プロジェクトを作成するディレクトリに移動して(その下に更にプロジェクト名でディレクトリが作成されます)
$ vue-native init xxxxxxxx
(xxxxxxxxは任意のプロジェクト名)
これで直下にプロジェクト用ディレクトリが作成されているので
$ cd xxxxxxxx
でプロジェクトのディレクトリに移動しましょう。
$ npm start
この後はいろいろな方法でエミュレータを起動できます。
例としては"a"キーを押すとAndroidエミュレータが起動
"i"キーを押すとiOSエミュレータが起動します。
Expoのエラー
この記事を書いている時点では、Expoにバグがあったようでエラーが出ました。
解消方法はこちらの記事を参照させていただきました。
プロジェクトのディレクトリ内にあるpackage.jsonとapp.jsonを編集してnpmで入れ直します。
開発
ここまできたらApp.vueを編集するとライブリロードで自動的にエミュレータが更新されます。
お疲れ様でした。