かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

React Native でプロジェクトを作って実機で画面確認まで

最近ご無沙汰してたReact Nativeですが、久しぶりにインストールしてみました!

node.js を入れる

これがないと始まらないですよね。最近のJavaScript界隈。

Node.js

create-react-native-app を入れる

npm i -g create-react-native-app

これでプロジェクトのひな形作ってくれるコマンドが入ります。

expo を入れる

なんか、気軽にアプリをデバッグ実行するためのものみたいですね。ありがたや。

expo.io

開発母艦にアプリを入れたらデバッグ用端末にもストアから expo のクライアントアプリを入れます。

yarn を入れる(入れなくてもいいかもしれない?)

2017/09/02 時点では npm 5 では create-react-native-app がうまく動きません。なのでかわりにyarnを入れます。

npm i -g yarn

プロジェクトを作る

ではさくっとプロジェクトを作ってみましょう。

create-react-native-app hello-react-native

のようにコマンドのあとにプロジェクト名をつけてうつとサクッと作ってくれます。

yarn start

これで expo 使っていつでもアクセスできるようになります。

Expo XDEを立ち上げるとこんな感じに表示されます。

f:id:okazuki:20170902205111p:plain

Shareを押すとQRコードとか出てくる。これをモバイルのexpoアプリから読み込めば動き始めます。 ただ、注意点としては同じネットワークにいないとダメってことですね。

あと、このQRコードのIPアドレスはどういうルールでとってこられてるのかわからないのですが、ローカルのネットワークにつながってるやつじゃないのが出てくることもあるみたいです。Hyper-Vのインターナルな奴?のネットワークのIP拾ってきてました。

なので ipconfig /all あたりでIPアドレスを確認して直打ちしました。

実行結果

こんな感じに画面が出ればとりあえず開発環境は整いました!あとはやっていくだけや!

f:id:okazuki:20170902210810p:plain