React Native 應用程式的資料夾結構

介紹

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 版本和其他屬性。

ios/資料夾

ios/ 資料夾包含在 iOS 裝置或模擬器上建置和執行 React Native 應用程式所需的所有本機 iOS 程式碼和設定檔。

關鍵文件和資料夾

• Podfile：指定 React Native 應用程式的 iOS 部分的依賴項，由 CocoaPods 管理。
• 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）。

結論

了解 React Native 應用程式的資料夾結構對於高效的專案管理和開發至關重要。每個資料夾和檔案都有特定的角色，從管理依賴項和配置到包含 Android 和 iOS 平台的程式碼和資源。

以上是React Native 應用程式的資料夾結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！