🔰 React Native + Expoの環境構築・シミュレーター起動まで #React

英語が読める方はこちらで解決できます。

下準備(終わった人向けに記事を書いています)

エディターのインストール(おすすめ: VSCode)
npmコマンドを使用するので、node.jsのインストール
参考記事：
Node.jsの開発環境を用意しよう！（macOS）
Node.jsの開発環境を用意しよう！（Windows）
仮想デバイス(エミュレーター/シミュレーター)を使用する場合は、AndroidならAndriodStudio, iOSはXcodeのインストールがそれぞれ必要となります

Androidの場合、AVD(仮想デバイス)のインストールをしておいた方が便利です。 (インストールしていないと、毎回適当なプロジェクトを起動しないといけません)

起動画面の右上のボタンから「Virtual Device Manager」を選択すると、インストールできます。

プロジェクト作成

ターミナルを開き、プロジェクトを作りたい場所で、以下のコマンドを打ちます。

npx create-expo-app プロジェクト名

仮想デバイス(シミュレータ/エミューレーター)起動

プロジェクトを作ったので、早速Hello, worldを表示させたいところですが、仮想デバイス起動のために２つ準備が必要です。

1 - Orbitをインストール

Orbitはビルドやアップデートを、仮想デバイスにインストールするのを便利にしくてれるソフトです。
仮想デバイスを使用する場合、必須となります。

もしかしたら、Orbitを起動した時に、「⚠️Xcode is not installed」のような警告が出ているかもしれません。(私はそうでした。)
その場合、ターミナルで以下のコマンドを実行してみてください。
sudo xcode-select -s /Applications/Xcode.app

インストールが完了し、初回起動後、OrbitがMacのメニューバーに表示されます。基本的に、今後はここで操作していくこととなります。

デバイス選択画面にて、仮想デバイスとして使用したいデバイスを選択します。
青くなっていればOKです。

2 - Expo Goをデバイスにインストール

Expo Goをデバイスに入れれば、コードの変更をリアルタイムで表示してくれます。
今回は仮想デバイスを使用するため、赤枠のところを選びましょう。

「Install with Orbit」ボタンを押せば、Orbitで選択したデバイスにExpo Goがインストールされます。

仮想デバイスにプレビューを表示する

プロジェクトのディレクトリをエディターで開き、以下のコマンドを打ちましょう。

npx expo start

以前までは、expo-cliをグローバルにインストールする必要がありましたが、いまではnpxで実行できるようになりました。

なにやらいろいろと表示されました。

上にあるQRコードは、実機で動作確認する際に読み込む用のものなので、今回は関係ないですね。
実機でやりたい方はApp StoreもしくはGoogle Play Storeで「Expo Go」をインストールしてください。

下にある「Press ...」で仮想デバイスの操作が行えます。
とりあえずデバイスを起動したいので、Androidなら「a」、iOSなら「i」を押しましょう。

おめでとうございます👏
仮想デバイスを起動することができました。

それでは、仮想デバイスを起動できたので、ソースコードをいじってみましょう。

App.js

export default function App() {
  return (
    <View style={styles.container}>
      // ここをいじりました
      <Text>Hello, Expo!!!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

コードを保存すれば・・・

問題なく表示できているようですね👏

参考

https://reactnative.dev/docs/environment-setup?guide=quickstart&package-manager=npm