mcpField
E
expo-ui-swift-ui

expo-ui-swift-ui

github.com/expoデザイン・UI3.9k295 回インストール2 日前に更新
リポジトリ

expo-ui-swift-ui について

expo-ui-swift-uiは、Expo UIのSwiftUIに似たAPIで画面を構築するためのスキルです。Expo SDK 55のプロジェクトを対象に、コンポーネントやモディファイアの確認、ネイティブ再ビルド、SwiftUIツリーへのReact Nativeビューの埋め込みを説明します。

主な機能

  1. 01SDK 55向けのガイダンス
  2. 02SwiftUI風のExpo UI API
  3. 03コンポーネントとモディファイアの文書確認
  4. 04SwiftUIツリーをHostでラップ
  5. 05React Nativeビューの埋め込み

活用シーン

  1. 01SwiftUIベースのExpo画面の構築
  2. 02コンポーネントとモディファイアAPIの確認
  3. 03SwiftUIへのReact Nativeビューの埋め込み

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/expo/skills --skill expo-ui-swift-ui

インストール後、Claude Code で/expo-ui-swift-uiを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

このスキルの指示は SDK 55 のみに適用されます。他の SDK バージョンについては、最も正確な情報を得るため、そのバージョンの Expo UI SwiftUI ドキュメントを参照してください。

インストール

npx expo install @expo/ui

インストール後、ネイティブの再ビルドが必要です（npx expo run:ios）。

手順

  • Expo UI の API は SwiftUI の API を反映しています。どのコンポーネントやモディファイアを使うかは、SwiftUI の知識をもとに判断してください。
  • コンポーネントは @expo/ui/swift-ui から、モディファイアは @expo/ui/swift-ui/modifiers からインポートします。
  • コンポーネントを使う際は、その API を確認するため、ドキュメントを取得してください：https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/{component-name}/index.md
  • モディファイアの API が不明な場合は、ドキュメントを参照してください：https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md
  • すべての SwiftUI ツリーは Host でラップする必要があります。
  • RNHostView は、SwiftUI ツリー内に RN コンポーネントを埋め込むためのものです。例：
import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";

<Host matchContents>
  <VStack>
    <RNHostView matchContents>
      // Here, `Pressable` is an RN component so it is wrapped in `RNHostView`.
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;

コメント

Markdown 対応