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

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

React Native - Setting up the development environment

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

1. エディターのインストール(おすすめ: VSCode)

2. npm コマンドを使用するので、node.js のインストール 参考記事： Node.js の開発環境を用意しよう！（macOS） Node.js の開発環境を用意しよう！（Windows）

3. 仮想デバイス(エミュレーター/シミュレーター)を使用する場合は、Android なら AndriodStudio, iOS は Xcode のインストールがそれぞれ必要となります

---

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

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

プロジェクト作成

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

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

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

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

1 - Orbit をインストール

https://expo.dev/orbit

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

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

sudo xcode-select -s /Applications/Xcode.app

---

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

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

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

https://expo.dev/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」を押しましょう。

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

---

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

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

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

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

参考

• React Native - Setting up the development environment