使用樣式元件和 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

---

✨ 核心組件

按鈕組件

按鈕元件是一個靈活的樣式按鈕，支援變體、大小和載入狀態。

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

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

道具：

• 變體：「主要」 | '次要' | '成功' | '警告' | '錯誤'| '訊息'
• 尺寸: 'sm' | 'md' | 'lg' | 'xl'
• 形狀： '方形' | '圓形' | 'roundedLg' | 'roundedLg' | '圓'
• 載入：布林值
• 禁用：布林值

---

彈性佈局

Flex 和 FlexItem 元件提供了受 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>;

道具：

• 方向： '行' | '柱子'
• 證明：'開始'| '中心' | '結束' | '之間'| '大約'
• 對齊：'開始'| '中心' | '結尾'
• 間隙：'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...
};

---

版式

在 theme/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)

---

?️ 類型安全

主題類型

使用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

---

組件道具

定義 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. 主題：

• 使用主題值而不是硬編碼。
• 透過 props 存取值：${({ theme }) =>;主題.顏色.primary}.

1. 組件組織:

• 將樣式元件分開到 style.tsx 檔案中。
• 使用index.tsx入口點將資料夾中的相關元件分組。

1. TypeScript:

• 明確鍵入所有道具和組件。
• 在適用的情況下擴充現有的 React Native 類型。

1. 性能：
   • 在渲染函數之外定義樣式元件。
   • 記憶複雜的組件。
   • 盡量減少道具更改。

---

？結論

本指南提供了將樣式元件與 Expo 和 TypeScript 結合使用的全面設定。憑藉強大的主題系統、暗模式支援和類型安全組件，該基礎確保了可擴展和可維護的程式碼庫。自訂並擴展此設定以滿足您專案的獨特要求。

有疑問或回饋嗎？發表評論或聯絡我們！ ？

以上是使用樣式元件和 TypeScript 設定 Expo的詳細內容。更多資訊請關注PHP中文網其他相關文章！