Expo UI SwiftUIで3画面タブを作る

今回作るもの

今回は、3つの画面をタブで切り替えられる構成を作ります。

作る画面は以下です。

この回では、各画面の中身は最小限にします。 Host と Text を使って、どの画面を表示しているか分かる状態にします。

作成するファイル

第3回では、以下のファイルを作成します。

src/
├── app/
│   └── index.tsx
└── screens/
    ├── TodayScreen.tsx
    ├── TasksScreen.tsx
    └── SettingsScreen.tsx

components/、data/、types/ は、必要になったタイミングで作成します。

TabViewを作る

src/app/index.tsx で TabView を表示します。

import { TabView } from "@expo/ui/swift-ui";
import { SettingsScreen } from "../screens/SettingsScreen";
import { TasksScreen } from "../screens/TasksScreen";
import { TodayScreen } from "../screens/TodayScreen";

export default function Index() {
  return (
    <TabView>
      <TabView.Item title="Today">
        <TodayScreen />
      </TabView.Item>
      <TabView.Item title="Tasks">
        <TasksScreen />
      </TabView.Item>
      <TabView.Item title="Settings">
        <SettingsScreen />
      </TabView.Item>
    </TabView>
  );
}

画面ファイルを作る

各画面では、Host と Text を使って、どの画面か分かるようにします。

src/screens/TodayScreen.tsx

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

export function TodayScreen() {
  return (
    <Host>
      <Text>Today Screen</Text>
    </Host>
  );
}

src/screens/TasksScreen.tsx

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

export function TasksScreen() {
  return (
    <Host>
      <Text>Tasks Screen</Text>
    </Host>
  );
}

src/screens/SettingsScreen.tsx

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

export function SettingsScreen() {
  return (
    <Host>
      <Text>Settings Screen</Text>
    </Host>
  );
}

iOSで動作確認する

iOS Simulator で起動します。

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

Today、Tasks、Settings を TabView で切り替えられればOKです。

次回やること

次回から、Today 画面を育てていきます。

まずは Text、Label、VStack、HStack、Spacer を使って、Today の基本レイアウトを作ります。