【React Native開発】Expo+TypeScript+React Nativeの最初のプロジェクトを作成する

こんばんは。今日は、Expo + TypeScript + React Nativeで最初のプロジェクトを作成するまでの手順を残しておこうと思います。こちらの記事はMac OSでの開発を前提としていますが、もしReact Nativeの開発環境がまだ準備されていない場合は、こちらをご参照ください。

React Nativeプロジェクトの作成

まずは、React Nativeプロジェクトの作成を行います。Expoを利用すれば、とても簡単にプロジェクトの作成が行えます。

っとその前に、TypeScriptを使用する場合は、上記の準備に加えて、typescriptもインストールしておきます。

npm install -g typescript

準備が終わったら、コンソールで、以下コマンドを実行します。

expo init MyFirstProjectTypeScript

すると、テンプレートプロジェクトが作成されますが、TypeScriptの場合はここで”blank (Type

これだけで完了です！

（参考）プロジェクトの構成

ちなみに、テンプレートプロジェクトの構成は以下のようになっています。

cd MyFirstProjectTypeScript
ls -ltr

TypeScriptではない場合が以下になりますが、以下が異なるようです。

App.tsx

React Native プロジェクトの実行

それでは、プロジェクトを実行してみます。プロジェクトディレクトリ内で、以下コマンドを実行します。

cd MyFirstProjectTypeScript
yarn start

すると、エミュレータ画面が立ち上がりましたが、エラーが・・・

コンソール画面にも、”Error running ‘xcrun simctl list devices –json’:xxxx”というエラーが出ています。

他のWebページをみると、どうやらXCode側で事前設定が必要だったみたい。

XCodeを起動し、Preference>Locationsで、CLI (Command Line Tools）を指定すればOKです。

再度コンソールでyarn startを実行し、iOSエミュレータを起動するため、”i”を押すと・・

今度は無事XCodeのエミュレータが立ち上がり、テンプレートアプリが立ち上がりました！

以上、Expo + TypeScript + React Nativeアプリを作成し、ローカルで立ち上げるまでの手順でした！

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。