ReactNative-expoのフォルダ構成について解説【ReactNative】

本記事の内容

• どのファイルにソースコードを書いていけばいいのか分からない人
• フォルダ構成を知りたい人

という方向けの記事になっています。

1.概要

Expoの有無でフォルダ構成が違う?

まず、整理してほしいことが、前回の記事でReactNativeの環境構築は2種類あると言いました。
そう、Expoを使うか使わないかの2種類です。

実は、Expoを使うか使わないかでフォルダ構成が変わってきます。

Expoの有無でフォルダ構成のどこが違うのか？

フォルダ構成の大きな違いとして、
iOSとAndroidのソースコードが分かれているかいないかです。

・Expo無し(ReactNativeをインストールする際に「npm install -g react-native-cli」コマンドを実行した人)は、iOSとAndroidでそれぞれフォルダが生成される。

・Expo有り(ReactNativeをインストールする際に「npm install -g expo-cli」コマンドを実行した人)は、iOSとAndroidフォルダが生成されない。

つまり、Expoを使って環境構築を行うと一つのソースコードからiOSとAndroidアプリが作れてしまうフォルダ構成になっているのです。

本記事の準備

今回は、Expo有りのフォルダ構成を例に解説していきます。
前回の記事でプロジェクト作成までの解説をしていますので、まだプロジェクト作成をしていない方は、以下のリンクから前回の記事を読んでから本記事を見る事をお勧めします。

2.フォルダ構成

最低限、知っておいた方がいいと言うファイル、フォルダについて解説していきます。

プロジェクトフォルダ

2.1 App.js

アプリ開発におけるメインとなるファイル(アプリケーションで実行されるコード)です。
このApp.jsファイルにソースコードを書いていきます。

2.2 app.json

アプリの名前やバージョンを決めたり、アプリ申請に必要な情報を記載したりするファイルです。
なので、このファイルは、アプリをリリースする時に編集するファイルですので、アプリ開発の序盤では触らなくてもいいファイルですね。

2.3 assets

画像などを管理するフォルダです。
筆者本人は、アプリで画像を使うときは、このフォルダに格納したりします。(※ここに格納しなくはならないと言う決まりもないので、必ずしも、ここに格納しなくても大丈夫です。)

icon.png

アプリのアイコン画像です。
アイコン画像サイズは、「192×192」です。

splash.png

アプリ起動時に表示されるスプラッシュ画像です。

2.4 node_modules

このフォルダに自動的にライブラリ(パッケージ)が格納されていきます。

2.5 package.json

インストールされているライブラリ(パッケージ)のバージョンが記載されています。

3.まとめ

本記事でApp.jsファイルにソースコードを書いけばいいと言うことがわかったと思います。
次の記事では、そのApp.jsファイルのソースコードについて解説していきます。