Configuration d'Expo avec des composants stylisés et TypeScript

Ce guide vous guide dans la configuration d'un projet Expo à l'aide de composants stylisés et de TypeScript. Le projet prend en charge un système de thèmes, un mode sombre et des composants d'interface utilisateur de type sécurisé, ce qui en fait une base solide pour les applications React Native modernes.

Code

---

? Caractéristiques

• Composants stylisés : exploitez la puissance des composants stylisés avec TypeScript.
• Expo Router : Gestion de la navigation simplifiée.
• Thèmes sombres/clairs : changement de thème intégré en fonction des préférences système.
• Composants préconfigurés : éléments d'interface utilisateur prêts à l'emploi et personnalisables.
• Conception cohérente : systèmes d'espacement et de typographie standardisés.
• Type Safety : thèmes et composants entièrement typés.

---

?️ Démarrage rapide

Étape 1 : Créer un nouveau projet d'exposition

Exécutez la commande suivante pour initialiser un nouveau projet Expo :

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

# Choose template: ➟ Blank (TypeScript)

Étape 2 : Installer les dépendances

Installez les dépendances requises pour les composants stylisés :

# Install styled-components
npm install styled-components

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

---

? Structure du projet

Organisez votre projet avec la structure suivante :

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

---

✨ Composants de base

Composant du bouton

Le composant Button est un bouton flexible et stylé prenant en charge les variantes, les tailles et les états de chargement.

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

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

Accessoires :

• variante : 'primaire' | 'secondaire' | 'succès' | 'avertissement' | 'erreur' | 'informations'
• taille : 'm' | 'MD' | 'LG' | 'xl'
• forme : 'carré' | 'arrondi' | 'arrondiLg' | 'circulaire'
• chargement : booléen
• désactivé : booléen

---

Disposition flexible

Les composants Flex et FlexItem offrent un système de mise en page flexible inspiré de 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>;

Accessoires :

• direction : 'rangée' | 'colonne'
• justifier : 'démarrer' | 'centre' | 'fin' | 'entre' | 'autour'
• aligner : 'démarrer' | 'centre' | 'fin'
• écart : 'sm' | 'MD' | 'LG' | 'xl'
• envelopper : 'envelopper' | 'maintenant'

---

? Système de thèmes

Couleurs

Définissez une palette de couleurs cohérente dans Themes/colors.ts :

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

---

Espacement

Standardiser l'espacement dans Themes/spacing.ts :

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

---

Typographie

Définir les tailles de police dans thèmes/styles.ts :

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

---

? Prise en charge du mode sombre

L'application s'adapte dynamiquement aux préférences du mode sombre du système :

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

# Choose template: ➟ Blank (TypeScript)

---

?️ Tapez Sécurité

Types de thèmes

Assurez la sécurité du type de thème avec thèmes/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

---

Accessoires de composants

Définissez les accessoires pour le composant Button :

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

---

? Meilleures pratiques

1. Thème :

• Utilisez les valeurs du thème au lieu du codage en dur.
• Accédez aux valeurs via les accessoires : ${({ theme }) => theme.colors.primary}.

1. Organisation des composants :

• Séparez les composants stylisés dans des fichiers style.tsx.
• Regroupez les composants associés dans des dossiers avec un point d'entrée index.tsx.

1. TypeScript :

• Tapez explicitement tous les accessoires et composants.
• Étendez les types React Native existants, le cas échéant.

1. Performances :
   • Définissez des composants stylisés en dehors des fonctions de rendu.
   • Mémorisez des composants complexes.
   • Minimisez les changements d'accessoires.

---

? Conclusion

Ce guide fournit une configuration complète pour l'utilisation de composants stylisés avec Expo et TypeScript. Avec un système de thèmes robuste, la prise en charge du mode sombre et des composants de type sécurisé, cette base garantit une base de code évolutive et maintenable. Personnalisez et étendez cette configuration pour répondre aux exigences uniques de votre projet.

Vous avez des questions ou des commentaires ? Laissez un commentaire ou contactez-nous ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!