React Nativeでのアプリ開発をはじめました。
基本ではありますが、ディレクトリ構成についてまとめてみました。
今後たくさん加筆修正するので、どんどんコメントください。

ディレクトリ構成

小ネタですが、homebrewがすでにある場合はターミナルで

$ brew install tree

として、

$ tree

とすると、自分が今いるディレクトリのディレクトリツリー（ディレクトリ構造）が入手できるみたい。
第一階層目だけのツリーを

$ tree -a -L 2

でみると

├── .eslintrc.json
├── .expo
├── .expo-shared
├── .git
├── .gitignore
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
└── package.json

こんな感じ。
.eslintrc.json
は前回作成した構文チェック用のやつなので、なくても問題ない。

これから、この階層にsrcというディレクトリを新規作成して、

├── .eslintrc.json
├── .expo
├── .expo-shared
├── .git
├── .gitignore
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
└── src

こうなる。src(source codeの略らしい)のディレクトリに必要なコードを全部格納する。

さらに、srcの中に、

• Elements
• Components
• Screens

の3つのディレクトリを新規作成する。

• Elementsはアプリ内で汎用性・共通性の高い要素（ボタンなど）の.jsファイルを入れる場所。
• ComponentsはElements汎用性のあまり高くない（特定のスクリーンにしか現れない）構成要素の.jsファイルを入れる場所。
• Screensは各々のスクリーンについて記述した.jsファイルを入れる場所。

それぞれに.jsファイルを追加すると、srcのディレクトリツリーはこんな感じ。

├── Components
│   ├── AhogeComponent.js
│   ├── BhogeComponent.js
│   └── ChogeComponent.js
├── Elements
│   ├── AhogeElement.js
│   └── BhogeElement.js
└── Screens
    ├── SettingScreen.js
    └── WelcomeScreen.js

画面遷移のあるアプリを開発するのであれば、App.jsにたくさん書き込むのはおすすめしない。
これらの.jsファイルをimportしながらアプリケーションを構成していくのが基本。
アプリ開発においてディレクトリの構造化は基本にして超重要。

それぞれの.jsファイルの書き方

編集中...