使用樣式元件和 TypeScript 設定 Expo-js教程-PHP中文網

Setting Up Expo with Styled Components and TypeScript

本指南將引導您使用樣式元件和 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

登入後複製