React Native Course

Day 2

Expo UI SwiftUIのプロジェクト準備

Expo の教材用プロジェクトを作成し、@expo/ui/swift-ui の Host と Text を使って iOS で SwiftUI component を表示する最小構成を作ります。

React Native / Expo8分

動画では、Expo プロジェクトを作成し、@expo/ui/swift-ui の Host と Text を使って、iOS で表示できるところまで進めます。 この記事では、使ったコマンド、最小コード、確認ポイントを整理します。

今回作るもの

今回は、教材用の Expo プロジェクトを作成し、@expo/ui/swift-ui の最小表示を確認します。

最終的には、iOS Simulator 上に SwiftUI component の Text が表示されればOKです。

前提

  • iOS で確認する
  • JSランタイムは Bun を使う
  • @expo/ui/swift-ui を使う

プロジェクトを作成する

まずは Expo プロジェクトを作成します。

# プロジェクト作成
bun create expo-app expo-ui-swiftui-components

プロジェクトに移動します。

# プロジェクトディレクトリへ移動
cd expo-ui-swiftui-components

必要なパッケージを確認する

@expo/ui を使える状態にします。

# @expo/ui のインストール
bunx expo install @expo/ui

最小コードを書く

第2回では、src/app/index.tsx で Host と Text を表示します。

import { Host, Text } from "@expo/ui/swift-ui";

export default function Index() {
  return (
    <Host>
      <Text>Expo UI SwiftUI Components</Text>
    </Host>
  );
}

iOSで動作確認する

iOS Simulator で起動します。

# iOS Simulator で起動
bunx expo start --ios

画面に Expo UI SwiftUI Components と表示されればOKです。

よくあるエラー

@expo/ui が見つからない

@expo/ui がインストールされていない可能性があります。

bunx expo install @expo/ui

iOSで起動できない

Xcode や iOS Simulator の準備ができているか確認します。

次回やること

次回は、TabView を使って、Today / Tasks / Settings の3画面を切り替えられるようにします。

← Expo UI SwiftUI 基礎コース に戻る