Loyiha tuzilmasi — app papkasi, app.json, assets

~10 daq · React Native · Kirish va o'rnatish

Muammodan boshlaylik

Loyiha papkasini ochdingiz — o'nlab fayl va papka. Qaysi biriga kod yoziladi? Ilova nomi va ikonkasi qayerda o'zgartiriladi? Qaysi fayllarga umuman tegmaslik kerak?

Asosiy tuzilma

mening-ilovam/
├── app/                  ← EKRANLAR (Expo Router)
│   ├── _layout.tsx       ← umumiy "qobiq": navigatsiya, provayderlar
│   └── index.tsx         ← bosh ekran
├── components/           ← qayta ishlatiladigan komponentlar
├── constants/            ← ranglar, o'lchamlar
├── hooks/                ← custom hooks
├── assets/
│   ├── images/           ← ikonka, splash, rasmlar
│   └── fonts/            ← shriftlar
├── app.json              ← ilova sozlamalari
├── package.json          ← kutubxonalar
├── tsconfig.json         ← TypeScript sozlamalari
└── node_modules/         ← o'rnatilgan paketlar (Git ga qo'shilmaydi)

app/ — har bir fayl — ekran

Expo Router da app/ papkasidagi fayllar avtomatik ekranlarga aylanadi — xuddi Next.js dagi kabi:

app/index.tsx          →  /           (bosh ekran)
app/sozlamalar.tsx     →  /sozlamalar
app/mahsulot/[id].tsx  →  /mahsulot/42

Faqat ekranlar shu yerda bo'lsin. Ekranga tegishli bo'lmagan komponentlarni app/ ga qo'ysangiz — Expo Router ularni ham ekran deb hisoblaydi. Komponentlar — components/ da.

Navigatsiya 5-bo'limda batafsil.

_layout.tsx

Barcha ekranlarni o'rab turuvchi komponent:

import { Stack } from 'expo-router';

export default function RootLayout() {
  return <Stack />;
}

Stack — ekranlar ustma-ust ochiladigan navigatsiya. Global provayderlar (mavzu, TanStack Query) ham shu yerga qo'yiladi.

app.json — ilova "pasporti"

{
  "expo": {
    "name": "Suv Hisoblagich",
    "slug": "suv-hisoblagich",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "suvhisob",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/images/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#f0f9ff"
    },
    "ios": {
      "bundleIdentifier": "uz.mening.suvhisob"
    },
    "android": {
      "package": "uz.mening.suvhisob",
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#0284c7"
      }
    },
    "plugins": ["expo-router"]
  }
}

app.json o'zgarishlari ko'pincha Expo serverni qayta ishga tushirishni talab qiladi.

Dinamik sozlama kerak bo'lsa (masalan, muhit o'zgaruvchilari) — app.config.ts.

package.json — kutubxonalar

{
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios"
  },
  "dependencies": {
    "expo": "~...",
    "expo-router": "~...",
    "react": "...",
    "react-native": "..."
  }
}

Kutubxona o'rnatish — npx expo install

npx expo install expo-camera          # ✅
npm install expo-camera               # ⚠️ mos bo'lmagan versiya tushishi mumkin

expo install — sizning Expo SDK versiyangizga mos versiyani tanlaydi. Native qismi bor kutubxonalar uchun bu muhim: noto'g'ri versiya — ilova ochilmaydi.

Oddiy JavaScript kutubxonalar (zod, date-fns) uchun npm install ham bo'ladi.

Yo'l taxalluslari: @/

import { Ranglar } from '../../../constants/Ranglar';   // ❌ chalkash
import { Ranglar } from '@/constants/Ranglar';          // ✅

tsconfig.json da "paths": { "@/*": ["./*"] } — shablonda allaqachon sozlangan.

Nimalarga tegmaslik

• node_modules/ — o'chirib, npm install bilan tiklanadi
• .expo/ — Expo keshi
• android/, ios/ papkalari — Expo da odatda yo'q. Ular faqat npx expo prebuild dan keyin paydo bo'ladi va avtomatik yaratiladi. Expo ning g'oyasi — native papkalarni qo'lda tahrirlamaslik, hammasini app.json va plaginlar orqali sozlash

Nima uchun shunday?

Nima uchun Expo android/ va ios/ papkalarini yashiradi, oddiy React Native da esa ular bor?

Chunki native papkalar — minglab qatorli Gradle, Xcode va konfiguratsiya fayllari. Ularni qo'lda tahrirlash — xatolar va React Native yangilanishida og'riqli "merge" lar. Expo yondashuvi — Continuous Native Generation: native loyiha app.json va plaginlardan har safar avtomatik yaratiladi. Siz faqat bitta konfiguratsiya faylini boshqarasiz, SDK yangilanishi esa ko'pincha bitta buyruq.

Xulosa

Eslab qoling:

• app/ — faqat ekranlar; fayl = yo'l (Expo Router)
• _layout.tsx — umumiy qobiq, navigatsiya va provayderlar
• components/, hooks/, constants/ — qolgan kod
• app.json — nom, ikonka, splash, bundleIdentifier/package, plaginlar
• Native kutubxonalar — npx expo install
• @/ — qisqa import yo'llari
• android/ va ios/ — avtomatik yaratiladi, qo'lda tahrirlanmaydi

Keyingi dars

5-dars: Debug — console, xato ekrani, React DevTools