Struktur Folder Apl Asli React

pengenalan

React Native ialah rangka kerja yang berkuasa untuk membina aplikasi mudah alih menggunakan JavaScript dan React. Sambil anda menyelami pembangunan dengan React Native, adalah penting untuk memahami struktur projek React Native biasa. Setiap folder dan fail mempunyai tujuan tertentu, dan mengetahui peranan mereka akan membantu anda mengurus dan menavigasi projek anda dengan lebih cekap. Artikel ini menyediakan gambaran keseluruhan menyeluruh tentang struktur folder apl React Native, memfokuskan pada kandungan dan tujuan direktori utama: direktori akar, folder android/ dan folder ios/.

Direktori Akar

Direktori akar projek React Native mengandungi fail dan folder penting yang mengurus kebergantungan, konfigurasi dan titik masuk projek.

Fail dan Folder Utama

• node_modules/: Mengandungi semua kebergantungan dan sub-kebergantungan yang dipasang melalui npm atau benang. Biasanya, anda tidak perlu menyentuh folder ini secara langsung.
• package.json: Menyenaraikan kebergantungan projek anda, skrip dan metadata lain. Ini penting untuk mengurus kebergantungan projek dan skrip.
• package-lock.json atau yarn.lock: Mengunci versi dependensi yang dipasang, memastikan konsistensi merentas persekitaran yang berbeza.
• index.js: Titik masuk untuk apl React Native anda, biasanya mendaftarkan komponen utama apl itu.

Folder Teras

• android/: Mengandungi kod Android asli dan fail konfigurasi, perlu jika anda perlu menulis atau mengubah suai kod Android asli.
• ios/: Mengandungi kod iOS asli dan fail konfigurasi, penting untuk menulis atau mengubah suai kod iOS asli.
• app/ or src/: Selalunya folder utama untuk kod JavaScript/TypeScript anda, seperti komponen, skrin dan perkhidmatan. Di sinilah kebanyakan kod apl anda berada.

Subfolder Biasa (di dalam apl/ atau src/)

• komponen/: Komponen UI boleh guna semula, membantu menyusun dan menggunakan semula elemen UI merentas bahagian yang berlainan apl.
• skrin/: Komponen yang mewakili skrin atau paparan yang berbeza, menjadikannya lebih mudah untuk mengurus navigasi dan skrin individu.
• navigasi/: Konfigurasi navigasi dan komponen, digunakan untuk menentukan struktur navigasi apl.
• aset/: Imej, fon dan aset statik lain, memastikan semua sumber statik teratur.
• redux/ (jika menggunakan Redux untuk pengurusan keadaan): Tindakan, pengurang dan konfigurasi stor untuk mengurus keadaan global aplikasi.
• gaya/: Gaya biasa digunakan merentas komponen dan skrin, membantu mengekalkan reka bentuk yang konsisten dan memudahkan pengurusan gaya.

Fail Konfigurasi dan Utiliti

• .babelrc atau babel.config.js: Fail konfigurasi Babel, mentakrifkan cara Babel mentranspile kod anda.
• .eslintrc.js: Fail konfigurasi ESLint, menyediakan peraturan linting untuk projek anda.
• .prettierrc: Fail konfigurasi yang lebih cantik, mengkonfigurasi peraturan pemformatan kod.
• metro.config.js: Fail konfigurasi untuk berkas Metro, berkas JavaScript yang digunakan oleh React Native.
• .gitignore: Menentukan fail dan direktori yang hendak diabaikan dalam repositori git anda.

Android/ Folder

Folder android/ mengandungi semua kod Android asli dan fail konfigurasi yang diperlukan untuk membina dan menjalankan apl React Native anda pada peranti Android atau emulator.

Fail dan Folder Utama

• build.gradle: Fail binaan peringkat atas yang membolehkan anda menambah pilihan konfigurasi yang biasa kepada semua sub-projek/modul.
• gradle.properties: Sifat konfigurasi untuk sistem binaan Gradle.
• gradlew dan gradlew.bat: Skrip untuk menjalankan arahan Gradle pada sistem berasaskan Unix dan Windows, masing-masing.
• settings.gradle: Menentukan modul projek, termasuk mana-mana perpustakaan luaran atau modul tambahan yang mungkin bergantung kepada projek anda.

Subfolder

aplikasi/

• build.gradle: Fail binaan untuk modul apl, yang mengandungi konfigurasi dan kebergantungan khusus untuk apl anda.
• src/: Mengandungi kod sumber untuk bahagian Android apl anda.
  • utama/:
  • AndroidManifest.xml: Menghuraikan maklumat penting tentang apl anda kepada alat binaan Android, sistem pengendalian Android dan Google Play.
  • java/: Mengandungi fail sumber Java atau Kotlin, termasuk MainActivity.java atau MainActivity.kt, titik masuk apl.
  • res/: Mengandungi sumber apl seperti reka letak, fail boleh lukis (imej), rentetan dan fail XML lain yang digunakan oleh apl.
  • aset/: Menyimpan fail aset mentah yang diperlukan oleh apl anda, seperti fon atau fail binari lain.
  • jniLibs/: Mengandungi perpustakaan asli yang diprakompilkan (fail.so) yang bergantung pada apl anda.

gradle/

• pembungkus/: Mengandungi fail untuk membantu dengan sistem binaan Gradle.
  • gradle-wrapper.jar: Fail JAR untuk pembalut Gradle, membolehkan anda membina projek anda tanpa memerlukan pengguna memasang Gradle.
  • gradle-wrapper.properties: Menentukan versi Gradle untuk digunakan dan sifat lain.

Ios/ Folder

Folder ios/ mengandungi semua kod iOS asli dan fail konfigurasi yang diperlukan untuk membina dan menjalankan apl React Native anda pada peranti atau simulator iOS.

Fail dan Folder Utama

• Fail Pod: Menentukan kebergantungan untuk bahagian iOS apl React Native anda, diurus oleh CocoaPods.
• Podfile.lock: Mengunci versi kebergantungan yang dinyatakan dalam Podfile, memastikan konsistensi merentas persekitaran yang berbeza.
• .xcworkspace: Fail ruang kerja yang dijana oleh CocoaPods yang anda gunakan untuk membuka projek anda dalam Xcode.
• .xcodeproj: Fail projek Xcode yang mengandungi tetapan dan maklumat projek apl anda.

Subfolder

/

• AppDelegate.m atau AppDelegate.swift: Mengurus acara dan keadaan peringkat aplikasi, titik masuk untuk apl iOS.
• Info.plist: Mengandungi maklumat konfigurasi untuk apl, seperti pengecam himpunan, nama apl, kebenaran dan tetapan lain.
• Assets.xcassets/: Mengandungi imej apl dan aset ikon.
• Base.lproj/: Mengandungi papan cerita utama atau fail skrin pelancaran (LaunchScreen.storyboard).
• main.m atau main.swift: Titik masuk utama untuk apl, menyediakan objek aplikasi dan perwakilan aplikasi.
• Fail Sokongan/: Mengandungi sumber dan konfigurasi tambahan, seperti hak dan tajuk penyambung (jika menggunakan Swift).

Kesimpulan

Memahami struktur folder apl React Native adalah penting untuk pengurusan dan pembangunan projek yang cekap. Setiap folder dan fail mempunyai peranan khusus, daripada mengurus kebergantungan dan konfigurasi kepada mengandungi kod dan sumber untuk kedua-dua platform Android dan iOS.

Atas ialah kandungan terperinci Struktur Folder Apl Asli React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!