使用样式组件和 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中文网其他相关文章！