[ReactNarive] macでexpoを使用した開発環境作成。brew,nodeを使用する。

brewのインストール

Macのパッケージマネージャをインストール

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodeのインストール

コンパイルに必要なnodeをインストールする。

brew install node

expoのインストール

expoを使用するとスマホ機能をエミュレートできる。
React Nativeを使用する必須?

npm install -g expo-cli

xcodeのインストール

Macでxcodeインストールします。
AppStoreでインストールできます。

プロジェクトの作成

下準備が出来たのでここからは任意のプロジェクトを作成。
※ react-native-appは任意のプロジェクト名にすること

expo init react-native-app

無難にblack(TypeScript)を選択。

? Choose a template: › - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
    blank                 a minimal app as clean as an empty canvas
❯   blank (TypeScript)    same as blank but with TypeScript configuration
    tabs (TypeScript)     several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal               bare and minimal, just the essentials to get you started
    minimal (TypeScript)  same as minimal but with TypeScript configuration

ReactNativeを起動

cd react-native-app
expo start 

以下のような画面が表示される。
ここでRun on iOS simulatorを選択する。
ここでxcodeがないと言われるのでインストールすること。

するとiOS(今回はiphne12)のエミュレータが起動する。

しばらくするとBuildされて作成するアプリが起動する。

よかったらシェアしてね!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください