React Native アプリのフォルダー構造-jsチュートリアル-php.cn

React Native アプリのフォルダー構造

WBOY

リリース： 2024-07-18 11:05:01

オリジナル

1020 人が閲覧しました

Folder Structure of a React Native App

導入

React Native は、JavaScript と React を使用してモバイルアプリケーションを構築するための強力なフレームワークです。 React Native を使用した開発に取り組む際には、典型的な React Native プロジェクトの構造を理解することが不可欠です。各フォルダーとファイルには特定の目的があり、それらの役割を理解すると、プロジェクトをより効率的に管理およびナビゲートするのに役立ちます。この記事では、メインディレクトリ (ルートディレクトリ、android/ フォルダ、ios/ フォルダ) の内容と目的に焦点を当て、React Native アプリのフォルダ構造の包括的な概要を説明します。

ルートディレクトリ

React Native プロジェクトのルートディレクトリには、プロジェクトの依存関係、構成、エントリポイントを管理する重要なファイルとフォルダーが含まれています。

主要なファイルとフォルダー

node_modules/: npm または Yarn 経由でインストールされたすべての依存関係とサブ依存関係が含まれます。通常、このフォルダーに直接触れる必要はありません。
package.json: プロジェクトの依存関係、スクリプト、その他のメタデータをリストします。これは、プロジェクトの依存関係とスクリプトを管理するために非常に重要です。
package-lock.json またはyarn.lock: インストールされている依存関係のバージョンをロックし、異なる環境間での一貫性を確保します。
index.js: React Native アプリのエントリポイント。通常はアプリのメインコンポーネントを登録します。

コアフォルダー

android/: ネイティブ Android コードを作成または変更する必要がある場合に必要な、ネイティブ Android コードと構成ファイルが含まれています。
ios/: ネイティブ iOS コードの作成または変更に不可欠な、ネイティブ iOS コードと構成ファイルが含まれています。
app/ または src/: 多くの場合、コンポーネント、画面、サービスなどの JavaScript/TypeScript コードのメインフォルダーです。ここにアプリのコードの大部分が存在します。

共通のサブフォルダー (app/ または src/ 内)

components/: 再利用可能な UI コンポーネント。アプリのさまざまな部分で UI 要素を整理して再利用するのに役立ちます。
画面/: さまざまな画面またはビューを表すコンポーネント。これにより、ナビゲーションと個々の画面の管理が容易になります。
navigations/: ナビゲーション構成とコンポーネント。アプリのナビゲーション構造を定義するために使用されます。
assets/: 画像、フォント、その他の静的アセット。すべての静的リソースを整理します。
redux/ (状態管理に Redux を使用している場合): アプリケーションのグローバル状態を管理するためのアクション、リデューサー、およびストア構成。
styles/: コンポーネントと画面全体で使用される共通のスタイル。一貫したデザインを維持し、スタイル管理を簡素化します。

設定ファイルとユーティリティファイル

.babelrc または babel.config.js: Babel 構成ファイル。Babel がコードをトランスパイルする方法を定義します。
.eslintrc.js: ESLint 構成ファイル。プロジェクトの lint ルールを設定します。
.prettierrc: Prettier 構成ファイル、コードフォーマットルールを構成します。
metro.config.js: React Native で使用される JavaScript バンドラーである Metro バンドラーの構成ファイル。
.gitignore: git リポジトリ内で無視するファイルとディレクトリを指定します。

android/フォルダー

android/ フォルダーには、Android デバイスまたはエミュレーター上で React Native アプリを構築して実行するために必要なすべてのネイティブ Android コードと構成ファイルが含まれています。

主要なファイルとフォルダー

build.gradle: すべてのサブプロジェクト/モジュールに共通の構成オプションを追加できるトップレベルのビルドファイルです。
gradle.properties: Gradle ビルドシステムの構成プロパティ。
gradlew および gradlew.bat: それぞれ Unix ベースと Windows システムで Gradle コマンドを実行するスクリプト。
settings.gradle: プロジェクトが依存する可能性のある外部ライブラリや追加モジュールを含む、プロジェクトのモジュールを指定します。

サブフォルダー

アプリ/

build.gradle: アプリ固有の構成と依存関係を含む、アプリモジュールのビルドファイル。
src/: アプリの Android 部分のソースコードが含まれています。
- メイン/:
- AndroidManifest.xml: Android ビルドツール、Android オペレーティングシステム、および Google Play に対するアプリに関する重要な情報を説明します。
- java/: アプリのエントリポイントである MainActivity.java または MainActivity.kt を含む Java または Kotlin ソースファイルが含まれます。
- res/: レイアウト、ドローアブルファイル (画像)、文字列、アプリで使用されるその他の XML ファイルなどのアプリリソースが含まれます。
- assets/: フォントやその他のバイナリファイルなど、アプリに必要な生のアセットファイルを保存します。
- jniLibs/: アプリが依存するプリコンパイルされたネイティブライブラリ (.so ファイル) が含まれます。

グラドル/

wrapper/: Gradle ビルドシステムに役立つファイルが含まれています。
- gradle-wrapper.jar: Gradle ラッパーの JAR ファイル。これにより、ユーザーが Gradle をインストールしなくてもプロジェクトをビルドできます。
- gradle-wrapper.properties: 使用する Gradle のバージョンとその他のプロパティを指定します。

ios/フォルダー

ios/ フォルダーには、iOS デバイスまたはシミュレーター上で React Native アプリを構築して実行するために必要なすべてのネイティブ iOS コードと構成ファイルが含まれています。

主要なファイルとフォルダー

Podfile: CocoaPods によって管理される、React Native アプリの iOS 部分の依存関係を指定します。
Podfile.lock: Podfile で指定された依存関係のバージョンをロックし、異なる環境間での一貫性を確保します。
.xcworkspace: CocoaPods によって生成されたワークスペースファイル。Xcode でプロジェクトを開くために使用します。
.xcodeproj: アプリのプロジェクト設定と情報を含む Xcode プロジェクトファイル。

サブフォルダー

<プロジェクト名>/

AppDelegate.m または AppDelegate.swift: iOS アプリのエントリポイントであるアプリケーションレベルのイベントと状態を管理します。
Info.plist: バンドル識別子、アプリ名、権限、その他の設定など、アプリの構成情報が含まれます。
Assets.xcassets/: アプリの画像とアイコンのアセットが含まれます。
Base.lproj/: メインのストーリーボードまたは起動画面ファイル (LaunchScreen.storyboard) が含まれます。
main.m または main.swift: アプリケーションオブジェクトとアプリケーションデリゲートを設定する、アプリのメインエントリポイント。
サポートファイル/: 資格やブリッジングヘッダー (Swift を使用している場合) などの追加のリソースと構成が含まれます。