expo-ui-swift-ui

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

使用する場合

• Expo で @expo/ui/swift-ui を使用して、iOS ネイティブの UI を構築する場合。
• SwiftUI のビューやモディファイアの選択、ツリーの Host によるラップ、RNHostView を使った React Native コンポーネントの埋め込みが必要な場合。
• SwiftUI 統合と拡張のガイダンスにおいて、Expo SDK 55 の動作を対象とする場合。

インストール

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>
      {/* Pressable is a React Native component, embedded through RNHostView. */}
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;

• 必要なモディファイアや View が Expo UI にない場合は、ローカルの Expo モジュールを使って拡張できます。詳細は https://docs.expo.dev/guides/expo-ui-swift-ui/extending/index.md を参照してください。拡張する前に、ユーザーに確認してください。

制限事項

• API は SDK 55 を対象としています。編集前に、そのバージョンの Expo ドキュメントとインストール済みのパッケージを確認してください。Android／iOS の例は各プラットフォームに固有であり、相互に置き換えられるものでも、実機での動作を証明するものでもありません。既存のフレームワークとユーザーの要件を優先してください。
• ネイティブの再ビルドでは依存関係がインストールまたは実行され、プロジェクトが変更されます。まず、対象となる開発環境を確認してください。icon.xml とアプリのコードはアプリケーションのアセットであり、バンドルされたファイルではありません。
• 出力を、環境に応じた検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認してください。