BETA

ReactNativeでAndroidアプリを動かしてみた

投稿日:2019-04-05
最終更新:2019-04-08

環境構築が終わったので、早速Androidアプリを実行してみた。

自分の環境はMacbookProなのでWin環境に関しては不明。

プロジェクトを作る

ターミナル上で実行するので、現在の位置を確認しておこう。
react-native init [プロジェクト名]
でプロジェクトが作成されるけど、現在の場所にプロジェクト名のフォルダが作成され、その中に各種ファイルが展開された。予めプロジェクト用のフォルダを作って移動しておくのがよいね。

フォルダの中を覗いてみると、Android向けのファイルが一式あった。

デバイスの用意

エミュレーターでもOKなので、とりあえずエミュレーターを起動した。

アプリの起動

作成したプロジェクトフォルダの直下に移動して、
react-native run-android これで起動。

複数端末が繋がっていたりするとどうなるのかしらね。


無事、エミュレーターにアプリがインストールされ、起動した!

AndroidStudioは基本的なインストールであれば問題ないね。
開発ターゲット向けのSDK Platformはインストールしておく必要はあるけど。


それにしても、これだけのアプリなのにデカイぞ…50MBか。

更新してみる

App.jsを更新せよ、か。
まずはHello Worldでしょう、という事でApp.jsを開いてみる。
「Welcome to React Native」を「Hello World」に変えて。

「キーボードのRをダブルタップすると更新」とあるが…?
エミュレーターにフォーカスを合わせた状態でキーボードのRをダブルタップしてみると、画面が更新された!

…実機だとどうするんだろうね。
公式サイトには開発者メニューとかなんとか書いてあるけど…
メニューボタンってなんだ?

起動時に開かれたターミナル

run-androidを実行した際に、ターミナルが開かれた。


こんなヤツ。

これを閉じると、Rダブルタップでの更新とか出来なくなるのでね!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

偉大な先人が切り開いた道だろう。しかし、それでも自分は初めて通る道なのだ。そして、これは自分の為に記していくのだ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!