浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

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

  • この記事いいね! (0)