React Nativeの環境構築設定や使い方・Hello Worldまで｜Android入門

こんにちは、ヨロと申します。

本日は、React Nativeの環境構築、設定という事で、

最初の準備から、Hello Worldの出力までを一通り簡単に説明します。

※追記：手違いで説明用の画像等が全て消えてしまいました。申し訳ありません。

React Native初心者・環境構築, 設定, 使い方【Windows, Android入門】

まずは最初にやる事としては、

・Node.jsのインストール
・Expo CLIのインストール
・シミュレータのインストール
・エミュレータを立ち上げる
・App.jsを書き換える
・設定を反映させる

開発環境の設定等については、ここを見れば詳しく書いてある。

https://docs.expo.dev/get-started/installation/?redirected

【React Native】環境構築・設定方法：Node.jsのインストール

という事で、まず初めにやる事としては、Node.jsのインストール

Node.jsのインストールに関しては、こちらの記事の「Nodist」を使って設定するのが便利かも。

【Node.js】Nodistインストール, メリット, 設定も簡単で使いやすいし便利

【React Native】環境構築・設定方法：Expo CLIのインストール

Expo CLIのインストール方法に関しては、コマンドプロンプトを起動して、

npm install -g expo-cliでOK。

【React Native】環境構築・設定方法：シミュレータのインストール

次に、シミュレータのインストール、

シミュレータとは、PC上にスマートフォンの画面を表示させる機能を備えたもの。

今回ここでは、Android Studioのインストール方法を軽くまとめてみました。

(Macの人はここで、XcodeとAndroid Studioのインストールを済ませておく)

Android Studioをインストールはこちらから

https://developer.android.com/studio

【React Native】環境構築・設定方法：Android Studioの設定方法

インストールが終わったら、Android Studioを起動後、

「next」「next」「next」で次々進んで「Finish」でOK。

Android Studioトップ画面右下の「Configure」→「Settings」

「System Settings」の中の「Android SDK」に、最新版がインストールされていればOK。

Start a new projectで、Androidのエミュレータを立ち上げる。

画面右上の「AVD Manager」のボタンをクリック

↓

「Create Virtual Device…」をクリック

そうすると、いろいろと機種が選べるようになるので、Next

OSを選ぶ画面になるので、とりあえずどれかを選択し、ダウンロードして、Next

Actionsの、再生ボタンをクリックして少し待つと、エミュレータが立ち上がる。

WindowsでiOSのシミュレータを使う場合

Windowsで、iOSのシミュレータを使う場合は「Visual Studio」などがある。

個人で使う分には「Visual Studio Community」を選んでおけばOK。

これに関してはまた、別記事で。

という事で、初めにやっておく設定についてはとりあえずはここまで。

【React Native初心者】環境構築, 設定, 使い方：Hello Worldを文字出力

コマンドプロンプトで、

npm install -g expo-cli

cd desktop

expo init プロジェクト名

ここでもしバージョンが違うよと言われてしまう場合は、バージョンの追加や切り替え方法をチェック。

Nodistのバージョンの切り替え方法なんかについてはこちら↓

https://malg7.com/nodist-install/

↓

Choose a templateと聞かれるので、blankを選択。

Please enter a few initial configuration values.と聞かれるので、

nameとslugを決める。

指定されたように、

cd プロジェクトフォルダ名で、フォルダ内に移動し、

npm start

Android Studioを立ち上げてみる

エミュレータ(Android Studio)を開き、プロジェクトファイルをフォルダごとドラッグアンドドロップ。

AVD Manager(画面右上のAndroidのスマホマーク)
↓
Actionsの再生ボタン(▶)を押して待つ(パソコンによってはかなり時間がかかるかも)

そうすると、Androidのエミュレータが開かれる。

ここでもしスマホ画面が立ち上がらない場合は、PCの容量が少なかったり、何かしら他の問題があるかも。

この状態でブラウザに戻り、Run on Android device/emulatorをクリック(そうしないとエラーが出る)

そうすると、スマホ画面に「Open up App.js to start working on your app!」と表示される。

今回やる事は、ここの文字を書き換えて「Hello World!」と表示させるだけ。

App.jsの「Open up App.js to start working on your app!」の部分を「Hello World!」に書き換える。

そうすると、スマートフォンの画面上にHello Worldが反映されるはず。

もし、反映されない場合はブラウザに戻り、Run on Android device/emulatorでスマホ画面を更新してみる。

React Nativeの環境構築設定や使い方・Hello Worldまで｜Android入門

とりあえず、今日のところはここまで。

内容を変更しても、自動的に更新、反映がされないという場合はこちらの記事がおすすめかも。

↓

Android Studioで変更, 更新をしてもエミュレータに自動的に反映されない場合

終わり。