react-nativeでアプリを作るに当たってのディレクトリ構造をまとめました。
実際作っていく際には以下のような構造になります。
├── src
│ ├── assets
│ │ ├── fonts
│ │ ├── images
│ ├── components
│ │ ├── atoms
│ │ ├── molecules
│ │ ├── organisms
│ ├── navigations
│ ├── scenes
│ ├── styles
│ ├── utils
│ ├── index.js
以下内訳↓
src:アプリのファイルをまとめる総本山
src/assets:画像を収めるファイル
src/component:コンポーネントの全ての集合体。パーツの役割ごとに分けている。
src/atom:ボタンやテキストなど最低限の機能が置かれているファイル
src/molecules:atomの要素を組み合わせて出来上がったコンポーネントを収めるファイル
atomファイルの中にあるボタン+テキストで入力文字の送信コンポーネントを作る場合はここに収める。
src/organisms:Atoms や Moleculesを組み合わせて更に大きなコンポーネントを作った時に
収めるファイル。
src/scene:アプリの画面を収めるファイル。例:login.jsやhome.jsなど
src/navigations:アプリの遷移先を予め決めて必要な時に遷移できるように設定をするファイル。
index.jsやauth-navigator.jsといったそれぞれの役割に会った名前を付ける。
src/styles:色や活字の設定をするファイル。
color.jsやtypegraphy.jsといったファイル名をつけてそこで設定していく。
昔からあるatmic思想的なディレクトリ構造ですが、react-nativeを初めて触る際は
これが一番わかりやすいかもしれません。