【Expo】expo initで生成されたディレクトリ・ファイルを詳しく見てみる

React-Native
この記事は約4分で読めます。

expo initをして自動生成されたファイルを詳しく見てみました。

ちなみに、フォルダ構造を見る時に便利なのは、treeコマンドですね。

入れていない方は、

$ brew install tree

でインストールできるのでこの機会にインストールしておきましょう。

それではディレクトリを確認。
※node_modulesディレクトリは大量のライブラリが入っているので無視

$ tree -a -I node_modules
.
├── .expo
│   ├── packager-info.json
│   └── settings.json
├── .expo-shared
│   └── assets.json // 画像ファイルのアップロードが開発者間で重複しないようにするため値が入っている
├── .git
│   ├── HEAD
│   ├── config
│   ├── description
│   ├── hooks
│   │   ├── applypatch-msg.sample
│   │   ├── commit-msg.sample
│   │   ├── fsmonitor-watchman.sample
│   │   ├── post-update.sample
│   │   ├── pre-applypatch.sample
│   │   ├── pre-commit.sample
│   │   ├── pre-push.sample
│   │   ├── pre-rebase.sample
│   │   ├── pre-receive.sample
│   │   ├── prepare-commit-msg.sample
│   │   └── update.sample
│   ├── info
│   │   └── exclude
│   ├── objects
│   │   ├── info
│   │   └── pack
│   └── refs
│       ├── heads
│       └── tags
├── .gitignore
├── App.js // アプリの発火元
├── __tests__
│   ├── App-test.js
│   └── __snapshots__
│       └── App-test.js.snap
├── app.json
├── assets // アイコン画像などはここに入れる
│   ├── fonts
│   │   └── SpaceMono-Regular.ttf
│   └── images
│       ├── icon.png
│       ├── robot-dev.png
│       ├── robot-prod.png
│       └── splash.png
├── babel.config.js
├── components // コンポーネントを入れておく
│   ├── StyledText.js
│   ├── TabBarIcon.js
│   └── __tests__
│       ├── StyledText-test.js
│       └── __snapshots__
│           └── StyledText-test.js.snap
├── constants // StyleSheetに利用する値を予め定義
│   ├── Colors.js
│   └── Layout.js
├── navigation // 画面遷移に関しての設定
│   ├── BottomTabNavigator.js
│   └── useLinking.js
├── package-lock.json
├── package.json
└── screens // スクリーンを入れておく
    ├── HomeScreen.js
    └── LinksScreen.js

※一旦出力だけして、後で一つずつのファイルの細かい説明を入れていきます

コメント

タイトルとURLをコピーしました