Menyediakan Ekspo dengan Komponen Bergaya dan TypeScript

Panduan ini memandu anda melalui penyediaan projek Ekspo menggunakan komponen gaya dan TypeScript. Projek ini menyokong sistem tema, mod gelap dan komponen UI selamat jenis, menjadikannya asas yang kukuh untuk aplikasi React Native moden.

Kod

---

? Ciri-ciri

• Komponen Bergaya: Manfaatkan kuasa komponen bergaya dengan TypeScript.
• Penghala Ekspo: Pengurusan navigasi yang dipermudahkan.
• Tema Gelap/Terang: Penukaran tema terbina dalam berdasarkan pilihan sistem.
• Komponen Prakonfigurasi: Elemen UI yang sedia untuk digunakan dan boleh disesuaikan.
• Reka Bentuk Konsisten: Sistem jarak dan tipografi piawai.
• Keselamatan Jenis: Tema dan komponen ditaip sepenuhnya.

---

?️ Mula Pantas

Langkah 1: Buat Projek Ekspo Baharu

Jalankan arahan berikut untuk memulakan projek Ekspo baharu:

npx create-expo-app styled-setup --template

# Choose template: ➟ Blank (TypeScript)

Langkah 2: Pasang Ketergantungan

Pasang kebergantungan yang diperlukan untuk komponen gaya:

# Install styled-components
npm install styled-components

# Install type definitions for styled-components
npm install @types/styled-components-react-native --save-dev

---

? Struktur Projek

Atur projek anda dengan struktur berikut:

├── app/                     # Expo Router app directory
│   ├── (tabs)/              # Tab navigation
│   │   ├── index.tsx        # First tab screen
│   │   ├── two.tsx          # Second tab screen
│   │   └── _layout.tsx      # Tab layout configuration
│   ├── _layout.tsx          # Root layout
│   ├── modal.tsx            # Modal screen
│   └── +not-found.tsx       # 404 screen
├── components/
│   ├── ui/                  # UI components
│   │   ├── button/
│   │   ├── container/
│   │   ├── text/
│   │   └── layout/
│   └── ExternalLink.tsx
├── themes/                  # Theme configuration
│   ├── colors.ts            # Color definitions
│   ├── sizes.ts             # Size scales
│   ├── spacing.ts           # Spacing system
│   ├── styles.ts            # Common styles
│   ├── theme.d.ts           # Theme type definitions
│   └── index.ts             # Theme export
└── hooks/                   # Custom hooks
    └── useColors.ts         # Theme colors hook

---

✨ Komponen Teras

Komponen Butang

Komponen Butang ialah butang yang fleksibel dan digayakan yang menyokong varian, saiz dan keadaan pemuatan.

import Button from "@/components/ui/button";

// Usage
<Button variant="primary" size="lg" shape="rounded" loading={false}>
  Click Me
</Button>;

Prop:

• varian: 'utama' | 'menengah' | 'kejayaan' | 'amaran' | 'kesilapan' | 'maklumat'
• saiz: 'sm' | 'md' | 'lg' | 'xl'
• bentuk: 'segi empat' | 'bulat' | 'bulatLg' | 'bulatan'
• memuatkan: boolean
• dilumpuhkan: boolean

---

Reka Letak Flex

Komponen Flex dan FlexItem menawarkan sistem susun atur fleksibel yang diilhamkan oleh CSS flexbox.

import { Flex, FlexItem } from "@/components/ui/layout";

// Usage
<Flex direction="row" justify="space-between" align="center" gap="md">
  <FlexItem grow={1}>
    <Text>Content</Text>
  </FlexItem>
</Flex>;

Prop:

• arah: 'baris' | 'lajur'
• mewajarkan: 'mulakan' | 'pusat' | 'akhir' | 'antara' | 'sekitar'
• selaraskan: 'mula' | 'pusat' | 'akhir'
• jurang: 'sm' | 'md' | 'lg' | 'xl'
• bungkus: 'bungkus' | 'nowrap'

---

? Sistem Tema

warna

Tentukan palet warna yang konsisten dalam tema/warna.ts:

const colors = {
  primary: "#3b82f6",
  secondary: "#22c55e",
  success: "#16a34a",
  error: "#dc2626",
  warning: "#f59e0b",
  info: "#0ea5e9",
  // Additional colors...
};

---

Jarak

Standardkan jarak dalam tema/spasi.ts:

const spacing = {
  padding: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  // Margin and gap definitions...
};

---

Tipografi

Tentukan saiz fon dalam tema/gaya.ts:

const fontSizes = {
  xs: 8,
  sm: 12,
  base: 14,
  md: 16,
  lg: 20,
  xl: 24,
  // Additional sizes...
};

---

? Sokongan Mod Gelap

Apl menyesuaikan diri dengan pilihan mod gelap sistem secara dinamik:

npx create-expo-app styled-setup --template

# Choose template: ➟ Blank (TypeScript)

---

?️ Jenis Keselamatan

Jenis Tema

Pastikan keselamatan jenis tema dengan tema/tema.d.ts:

# Install styled-components
npm install styled-components

# Install type definitions for styled-components
npm install @types/styled-components-react-native --save-dev

---

Komponen Props

Tentukan prop untuk komponen Butang:

├── app/                     # Expo Router app directory
│   ├── (tabs)/              # Tab navigation
│   │   ├── index.tsx        # First tab screen
│   │   ├── two.tsx          # Second tab screen
│   │   └── _layout.tsx      # Tab layout configuration
│   ├── _layout.tsx          # Root layout
│   ├── modal.tsx            # Modal screen
│   └── +not-found.tsx       # 404 screen
├── components/
│   ├── ui/                  # UI components
│   │   ├── button/
│   │   ├── container/
│   │   ├── text/
│   │   └── layout/
│   └── ExternalLink.tsx
├── themes/                  # Theme configuration
│   ├── colors.ts            # Color definitions
│   ├── sizes.ts             # Size scales
│   ├── spacing.ts           # Spacing system
│   ├── styles.ts            # Common styles
│   ├── theme.d.ts           # Theme type definitions
│   └── index.ts             # Theme export
└── hooks/                   # Custom hooks
    └── useColors.ts         # Theme colors hook

---

? Amalan Terbaik

1. Tema:

• Gunakan nilai tema dan bukannya pengekodan keras.
• Akses nilai melalui prop: ${({ theme }) => theme.colors.primary}.

1. Organisasi Komponen:

• Asingkan komponen gaya ke dalam fail style.tsx.
• Kumpulkan komponen berkaitan dalam folder dengan titik masuk index.tsx.

1. Skrip Jenis:

• Taip semua prop dan komponen dengan jelas.
• Lanjutkan jenis React Native sedia ada jika berkenaan.

1. Prestasi:
   • Tentukan komponen gaya di luar fungsi pemaparan.
   • Hafal komponen kompleks.
   • Minimumkan perubahan prop.

---

? Kesimpulan

Panduan ini menyediakan persediaan yang komprehensif untuk menggunakan komponen gaya dengan Ekspo dan TypeScript. Dengan sistem tema yang mantap, sokongan mod gelap dan komponen selamat jenis, asas ini memastikan pangkalan kod yang boleh skala dan boleh diselenggara. Sesuaikan dan lanjutkan persediaan ini untuk memenuhi keperluan unik projek anda.

Ada soalan atau maklum balas? Lepaskan komen atau hubungi! ?

Atas ialah kandungan terperinci Menyediakan Ekspo dengan Komponen Bergaya dan TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!