React Native 應用程式的資料夾結構-js教程-PHP中文網

Folder Structure of a React Native App

介紹

React Native 是一個強大的框架，用於使用 JavaScript 和 React 建立行動應用程式。當您深入使用 React Native 進行開發時，了解典型 React Native 專案的結構至關重要。每個資料夾和檔案都有特定的用途，了解它們的角色將幫助您更有效地管理和導航專案。本文全面概述了 React Native 應用程式的資料夾結構，重點介紹了主要目錄的內容和用途：根目錄、android/ 資料夾和 ios/ 資料夾。

根目錄

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/內）

元件/：可重複使用的 UI 元件，有助於在應用程式的不同部分組織和重複使用 UI 元素。
screens/：代表不同螢幕或視圖的元件，讓管理導航和單一螢幕變得更容易。
navigations/：導覽配置和元件，用於定義應用程式的導航結構。
assets/：圖片、字體和其他靜態資源，使所有靜態資源井井有條。
redux/（如果使用 Redux 進行狀態管理）：用於管理應用程式全域狀態的操作、reducers 和儲存配置。
styles/：跨組件和螢幕使用的通用樣式，有助於保持一致的設計並簡化樣式管理。

配置和實用程式文件

.babelrc 或 babel.config.js：Babel 設定文件，定義 Babel 如何轉譯你的程式碼。
.eslintrc.js：ESLint 設定文件，為您的專案設定 linting 規則。
.prettierrc：Prettier設定文件，設定碼格式化規則。
metro.config.js：Metro 捆綁器的設定文件，React Native 使用的 JavaScript 捆綁器。
.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/：包含 Java 或 Kotlin 原始文件，包括 MainActivity.java 或 MainActivity.kt，應用程式的入口點。
- res/：包含應用程式資源，例如佈局、可繪製檔案（映像）、字串和應用程式使用的其他 XML 檔案。
- assets/：儲存應用程式所需的原始資源文件，例如字體或其他二進位。
- jniLibs/：包含您的應用程式所依賴的預編譯本機程式庫（.so 檔案）。

梯度/

wrapper/：包含有助於 Gradle 建置系統的檔案。
- gradle-wrapper.jar：Gradle 包裝器的 JAR 文件，讓您可以建置專案而無需使用者安裝 Gradle。
- gradle-wrapper.properties：指定要使用的 Gradle 版本和其他屬性。