Expo mit gestalteten Komponenten und TypeScript einrichten

Diese Anleitung führt Sie durch die Einrichtung eines Expo-Projekts mit Styled-Components und TypeScript. Das Projekt unterstützt ein Designsystem, einen Dunkelmodus und typsichere UI-Komponenten und stellt damit eine solide Grundlage für moderne React Native-Anwendungen dar.

Code

---

? Merkmale

• Gestaltete Komponenten: Nutzen Sie die Leistungsfähigkeit von gestalteten Komponenten mit TypeScript.
• Expo Router: Vereinfachte Navigationsverwaltung.
• Dunkel-/Hell-Themen: Integrierter Themenwechsel basierend auf Systemeinstellungen.
• Vorkonfigurierte Komponenten: Gebrauchsfertige, anpassbare UI-Elemente.
• Konsistentes Design: Standardisierte Abstands- und Typografiesysteme.
• Typsicherheit: Vollständig typisierte Themen und Komponenten.

---

?️ Schnellstart

Schritt 1: Erstellen Sie ein neues Expo-Projekt

Führen Sie den folgenden Befehl aus, um ein neues Expo-Projekt zu initialisieren:

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

# Choose template: ➟ Blank (TypeScript)

Schritt 2: Abhängigkeiten installieren

Installieren Sie die erforderlichen Abhängigkeiten für gestaltete Komponenten:

# Install styled-components
npm install styled-components

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

---

? Projektstruktur

Organisieren Sie Ihr Projekt mit der folgenden Struktur:

├── 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

---

✨ Kernkomponenten

Schaltflächenkomponente

Die Schaltflächenkomponente ist eine flexible, gestaltete Schaltfläche, die Varianten, Größen und Ladezustände unterstützt.

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

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

Requisiten:

• Variante: 'primär' | 'sekundär' | 'Erfolg' | 'Warnung' | 'Fehler' | 'Info'
• Größe: 'sm' | 'md' | 'lg' | 'xl'
• Form: 'quadratisch' | 'gerundet' | 'roundedLg' | 'kreisförmig'
• Laden: boolean
• deaktiviert: boolean

---

Flex-Layout

Die Flex- und FlexItem-Komponenten bieten ein flexibles Layoutsystem, das von CSS Flexbox inspiriert ist.

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>;

Requisiten:

• Richtung: 'Reihe' | 'Spalte'
• rechtfertigen: 'start' | 'Mitte' | 'Ende' | 'zwischen' | 'um'
• align: 'start' | 'Mitte' | 'Ende'
• Lücke: 'sm' | 'md' | 'lg' | 'xl'
• Wrap: 'wrap' | 'nowrap'

---

? Themensystem

Farben

Definieren Sie eine konsistente Farbpalette in themes/colors.ts:

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

---

Abstand

Abstände in themes/spacing.ts standardisieren:

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

---

Typografie

Schriftgrößen in theme/styles.ts definieren:

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

---

? Unterstützung für den Dunkelmodus

Die App passt sich dynamisch an die Dunkelmoduseinstellungen des Systems an:

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

# Choose template: ➟ Blank (TypeScript)

---

?️ Geben Sie Sicherheit ein

Thementypen

Gewährleisten Sie die Sicherheit des Theme-Typs mit themes/theme.d.ts:

# Install styled-components
npm install styled-components

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

---

Komponenten-Requisiten

Requisiten für die Button-Komponente definieren:

├── 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

---

? Best Practices

1. Themengestaltung:

• Verwenden Sie Designwerte statt Hardcodierung.
• Zugriff auf Werte über Requisiten: ${({ theme }) => theme.colors.primary}.

1. Komponentenorganisation:

• Teilen Sie gestaltete Komponenten in style.tsx-Dateien auf.
• Gruppieren Sie verwandte Komponenten in Ordnern mit einem index.tsx-Einstiegspunkt.

1. TypeScript:

• Geben Sie alle Requisiten und Komponenten explizit ein.
• Erweitern Sie gegebenenfalls vorhandene React Native-Typen.

1. Leistung:
   • Definieren Sie gestaltete Komponenten außerhalb von Renderfunktionen.
   • Komplexe Komponenten auswendig lernen.
   • Änderungen an Requisiten minimieren.

---

? Abschluss

Diese Anleitung bietet eine umfassende Einrichtung für die Verwendung von Styled-Components mit Expo und TypeScript. Mit einem robusten Theme-System, Dark-Mode-Unterstützung und typsicheren Komponenten gewährleistet diese Grundlage eine skalierbare und wartbare Codebasis. Passen Sie dieses Setup an und erweitern Sie es, um die individuellen Anforderungen Ihres Projekts zu erfüllen.

Haben Sie Fragen oder Feedback? Schreiben Sie einen Kommentar oder kontaktieren Sie uns! ?

Das obige ist der detaillierte Inhalt vonExpo mit gestalteten Komponenten und TypeScript einrichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!