【react-native】react-nativeの基本的なディレクトリ構造

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を初めて触る際は

これが一番わかりやすいかもしれません。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG