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ダブルタップでの更新とか出来なくなるのでね!

記事が少しでもいいなと思ったらクラップを送ってみよう!
8
+1
偉大な先人が切り開いた道だろう。しかし、それでも自分は初めて通る道なのだ。そして、これは自分の為に記していくのだ。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする