스타일이 지정된 구성 요소 및 TypeScript를 사용하여 Expo 설정

이 가이드는 스타일 구성 요소와 TypeScript를 사용하여 Expo 프로젝트를 설정하는 과정을 안내합니다. 이 프로젝트는 테마 시스템, 다크 모드, 유형 안전 UI 구성 요소를 지원하여 최신 React Native 애플리케이션을 위한 강력한 기반이 됩니다.

코드

---

? 특징

• 스타일 구성 요소: TypeScript로 스타일 구성 요소의 강력한 기능을 활용하세요.
• Expo Router: 단순화된 탐색 관리
• 어두운/밝은 테마: 시스템 기본 설정에 따라 테마 전환 기능이 내장되어 있습니다.
• 사전 구성된 구성요소: 즉시 사용 가능하고 사용자 정의 가능한 UI 요소.
• 일관된 디자인: 표준화된 간격 및 타이포그래피 시스템
• 유형 안전성: 완전한 유형의 테마 및 구성요소.

---

?️ 빠른 시작

1단계: 새 엑스포 프로젝트 만들기

새 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' | '회보'
• 로딩: 부울
• 비활성화됨: 부울

---

플렉스 레이아웃

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' | '엘지' | '특대'
• 포장: '포장' | '노랩'

---

? 테마 시스템

그림 물감

themes/colors.ts에서 일관된 색상 팔레트를 정의하세요.

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

---

간격

themes/spacing.ts의 간격 표준화:

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

---

타이포그래피

themes/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 구성 요소에 대한 소품 정의:

├── 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. 테마:

• 하드코딩 대신 테마 값을 사용하세요.
• 소품을 통해 값에 액세스: ${({ theme }) => theme.colors.primary}.

1. 구성요소 조직:

• 스타일이 지정된 구성요소를 style.tsx 파일로 분리하세요.
• index.tsx 진입점이 있는 폴더에 관련 구성 요소를 그룹화합니다.

1. 타입스크립트:

• 모든 소품과 구성요소를 명시적으로 입력하세요.
• 해당하는 경우 기존 React Native 유형을 확장하세요.

1. 성능:
   • 렌더링 기능 외부에서 스타일이 지정된 구성요소를 정의하세요.
   • 복잡한 구성요소를 메모하세요.
   • 소품 변경을 최소화하세요.

---

? 결론

이 가이드는 Expo 및 TypeScript와 함께 스타일 구성 요소를 사용하기 위한 포괄적인 설정을 제공합니다. 강력한 테마 시스템, 다크 모드 지원 및 유형 안전 구성 요소를 갖춘 이 기반은 확장 가능하고 유지 관리 가능한 코드베이스를 보장합니다. 프로젝트의 고유한 요구 사항에 맞게 이 설정을 사용자 정의하고 확장하세요.

질문이나 의견이 있으신가요? 댓글을 남기거나 연락주세요! ?

위 내용은 스타일이 지정된 구성 요소 및 TypeScript를 사용하여 Expo 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!