Getting Started

SEED AppScreen을 사용하기 위한 Stackflow 플러그인 설정 방법을 안내합니다.

Overview

SEED React의 AppScreen 컴포넌트를 사용하려면 Stackflow 플러그인에 seedPlugin을 추가합니다.

App Screen

AppScreen 컴포넌트에 대해 자세히 알아봅니다.

seedPlugin은 다음 기능을 제공합니다.

테마 컨텍스트 제공: 모든 AppScreen 컴포넌트에 theme을 자동으로 전달합니다.
전역(Global) 인터랙션 관리: Swipe Back (쓸어서 뒤로 가기) 제스처 및 전역 트랜지션 상태를 관리합니다.

Installation

seedPlugin은 @seed-design/stackflow 패키지에 포함되어 있습니다.

npm install @seed-design/stackflow

Usage

Stackflow 설정 시 plugins 배열에 seedPlugin을 추가합니다.

import { stackflow } from "@stackflow/react/future";
import { seedPlugin } from "@seed-design/stackflow";

export const { Stack, actions } = stackflow({
  plugins: [
    seedPlugin({ theme: "cupertino" }),
    // ...
  ],
  // ...
});

Options

Prop

Type

What It Provides

Theme Context

seedPlugin은 theme 옵션을 통해 설정된 테마를 모든 AppScreen 컴포넌트에 전달합니다. 모든 AppScreen은 기본적으로 이 테마를 사용합니다.

theme은 @stackflow/plugin-basic-ui와 동일하게 "android" | "cupertino" 중 선택할 수 있습니다.

// seedPlugin에 옵션으로 제공한 theme이 `AppScreen`에 기본적으로 적용됩니다.
// `AppScreen`의 `theme` prop을 통해 오버라이드할 수 있습니다.
<AppScreen>
  <AppBar>
    {/* ... */}
  </AppBar>
  <AppScreenContent>
    {/* ... */}
  </AppScreenContent>
</AppScreen>

Swipe Back Gesture

theme="cupertino"를 사용하는 경우, iOS 스타일의 Swipe Back (쓸어서 뒤로 가기) 제스처가 활성화됩니다.

화면 왼쪽 가장자리에서 오른쪽으로 스와이프하면 이전 Activity로 이동합니다.
스와이프 정도에 따라 AppScreen이 위치를 업데이트합니다.