スタイル付きコンポーネントと TypeScript を使用した Expo のセットアップ

このガイドでは、スタイル付きコンポーネントと TypeScript を使用して Expo プロジェクトをセットアップする手順を説明します。このプロジェクトはテーマ システム、ダーク モード、タイプ セーフ UI コンポーネントをサポートしており、最新の React Native アプリケーションの堅牢な基盤となります。

コード

---

?特徴

• スタイル付きコンポーネント: TypeScript でスタイル付きコンポーネントの機能を活用します。
• Expo Router: 簡素化されたナビゲーション管理。
• ダーク/ライト テーマ: システム設定に基づいて組み込みのテーマを切り替えます。
• 事前構成されたコンポーネント: すぐに使用できる、カスタマイズ可能な UI 要素。
• 一貫したデザイン: 標準化されたスペースとタイポグラフィーシステム。
• タイプ セーフティ: 完全に型指定されたテーマとコンポーネント。

---

⁉️ クイックスタート

ステップ 1: 新しい Expo プロジェクトを作成する

次のコマンドを実行して、新しい Expo プロジェクトを初期化します:

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

# Choose template: ➟ Blank (TypeScript)

ステップ 2: 依存関係をインストールする

スタイル付きコンポーネントに必要な依存関係をインストールします。

# Install styled-components
npm install styled-components

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

---

?プロジェクトの構造

次の構造でプロジェクトを編成します:

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

---

✨ コアコンポーネント

ボタンコンポーネント

Button コンポーネントは、バリアント、サイズ、読み込み状態をサポートする柔軟なスタイル付きボタンです。

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

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

小道具:

• バリアント: 'プライマリ' | '二次' | '成功' | '警告' | 'エラー' | '情報'
• サイズ: 'sm' | 'md' | 'lg' | 「XL」
• 形状: '正方形' | '丸い' | '丸いLg' | 「円形」
• 読み込み中: ブール値
• 無効: ブール値

---

フレックスレイアウト

Flex コンポーネントと FlexItem コンポーネントは、CSS フレックスボックスからインスピレーションを得た柔軟なレイアウト システムを提供します。

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

小道具:

• 方向: '行' | 'カラム'
• 両端揃え: '開始' | '中心' | '終わり' | '間' | 'その周り'
• 整列: '開始' | '中心' | '終わり'
• ギャップ: 'sm' | 'md' | 'lg' | 「XL」
• ラップ: 'ラップ' | 「ナラップ」

---

?テーマシステム

色

themes/colors.ts で一貫したカラー パレットを定義します。

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

---

間隔

主題/spacing.ts で間隔を標準化します:

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

---

タイポグラフィ

テーマ/styles.ts でフォント サイズを定義します:

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

---

?ダークモードのサポート

アプリはシステムのダークモード設定に動的に適応します:

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

# Choose template: ➟ Blank (TypeScript)

---

⁉️ タイプの安全性

テーマの種類

主題/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

---

コンポーネントの小道具

Button コンポーネントの props を定義します:

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

---

?ベストプラクティス

1. テーマ:

• ハードコーディングの代わりにテーマ値を使用します。
• 小道具を介して値にアクセスする: ${({ テーマ }) =>テーマ.カラー.プライマリ}.

1. コンポーネントの構成:

• スタイル付きコンポーネントを style.tsx ファイルに分割します。
• index.tsx エントリ ポイントを使用して、関連するコンポーネントをフォルダーにグループ化します。

1. TypeScript:

• すべてのプロパティとコンポーネントを明示的に入力します。
• 該当する場合、既存の React Native タイプを拡張します。

1. パフォーマンス:
   • レンダリング関数の外側でスタイル付きコンポーネントを定義します。
   • 複雑なコンポーネントをメモ化します。
   • プロップの変更を最小限に抑えます。

---

?結論

このガイドでは、Expo および TypeScript でスタイル付きコンポーネントを使用するための包括的なセットアップを提供します。堅牢なテーマ システム、ダーク モードのサポート、タイプ セーフ コンポーネントを備えたこの基盤により、スケーラブルで保守可能なコードベースが保証されます。プロジェクト固有の要件を満たすように、このセットアップをカスタマイズおよび拡張します。

ご質問やフィードバックがありますか?コメントをドロップするか、ご連絡ください。 ?

以上がスタイル付きコンポーネントと TypeScript を使用した Expo のセットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。