とがみんブログ
就活中、自己分析にハマり、心理学、脳科学の本を読み漁りつつ哲学チックなことをひたすら考えていました。このブログでは、そんなとがみんの考えや経験を綴っていきます。
React Native

【React Native】Expoでのプロジェクト作成方法

どうも、とがみんです。

iOSアプリとアンドロイドアプリの両方を効率よく開発できるようになるために、React-Nativeを勉強しています。

この記事では、Expoを使用して、iOSアプリ、アンドロイドアプリを開発するに当たって、

そのプロジェクトの作成方法について説明していきます。

プロジェクト作成方法

事前に「Node.js」、「Expo」がインストールされている前提で紹介していきます。

まだの人はまず先にインストールしてください。

 とがみんブログ
とがみんブログ
https://togamin.com/2019/02/16/envirement/

テンプレートの選択

ターミナルを立ち上げ、プロジェクトを作成するフォルダまで移動します。
そして、expo initと打ち、Enterキーを押します。

すると、blankと、tabsの2つの選択肢が表示されるので、今回はblankを選択します。

tabsの方を選択すると、デフォルトでTab Navigationがついてくるのですが、今回はblankを選択します。

workflowの選択

テンプレートを選択した後、Choose which workflow to use:とでると思います。

今回はデフォルトのmanagedを選択します。

プロジェクト名を決める

次に、プロジェクト名とプロジェクトIDを入力する欄が出てくるので、入力してEnterキーを押します。

今回は両方ともに「Test」と記入しました。

すると必要なファイルが諸々インストールされます。

最後に

最後にターミナルに、

cd Test→Enterキー

npm start→Enterキー

を押すと、ブラウザにコントロールパネルが表示されます。

これで、Testフォルダ内に、アプリを開発していく上で必要なファイルが生成され、

ここにアプリをアプリを作るためのコードなり、ファイルを追加していくことによってアプリを開発していきます。

シュミレーション

アプリのシュミレーションにはExpoというアプリを使用します。

Expo Client

Expo Client

Nametag無料posted withアプリーチ

ブラウザ上のQRコードをスマホのカメラアプリで読み込み、Expoを立ち上げると、動作を確認することができます。

まとめ

React Nativeを使用してアプリ開発をするにあたって、プロジェクトを作成する方法について紹介しました。

不明点等何かあればご指摘いただけると嬉しいです。

参考文献

>ExpoでReact Nativeのアプリを作るための環境構築方法【Yarn対応】