mcpField
E
Expo UI SwiftUI

Expo UI SwiftUI

github.com/expo開発3.5k12.9k 回インストール今日更新
リポジトリ

Expo UI SwiftUI について

Expo SDK 55 向けの SwiftUI 開発スキルです。`@expo/ui` の SwiftUI 形式のコンポーネントやモディファイアの使い方、ドキュメント確認、ローカルモジュール拡張を案内します。

主な機能

  1. 01`@expo/ui` の SwiftUI API の利用
  2. 02`Host` による SwiftUI ツリーのラップ
  3. 03コンポーネントとモディファイアのドキュメント確認
  4. 04`RNHostView` による React Native 部品の埋め込み
  5. 05API 不足時のローカル Expo モジュール拡張

活用シーン

  1. 01Expo アプリでの SwiftUI インターフェース構築
  2. 02SwiftUI ツリーへの React Native 部品の埋め込み
  3. 03コンポーネントやモディファイアの使い方の確認

インストール

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

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

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

詳細

このスキルの指示は 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 対応