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

man

困ってる人

React Nativeの使い方が全く分からない
インストールや設定、環境構築って一体どうやればいいの?


こんにちは、よろと申します。

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

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

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

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

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

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

https://docs.expo.io/versions/v34.0.0/introduction/installation/

【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でスマホ画面を更新してみる。

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

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

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

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール