ブログ変更履歴 GitHub でスターを付ける

ホームガイド EAS リファレンス学習

Archive Expo Snack Discord and forums Newsletter

ナビゲーションを追加する

ページを編集

この章では、Expo アプリにナビゲーションを追加する方法を学びます。

この章では、Expo Router の基本を学び、スタックナビゲーションと 2 つのタブを持つボトムタブバーを作成します。

視聴：ユニバーサル Expo アプリにナビゲーションを追加する

視聴：ユニバーサル Expo アプリにナビゲーションを追加する

Expo Router でファイルベースルーティングをセットアップし、画面間のスタックナビゲーションを作成して、ボトムタブバーを構築します。

Expo Router の基本

Expo Router は React Native と web アプリ向けのファイルベースのルーティングフレームワークです。画面間のナビゲーションを管理し、複数のプラットフォームで同じコンポーネントを使用できます。始めるにあたって、次の規約を理解しておく必要があります。

app ディレクトリ：ルートとそのレイアウトのみを含む特別なディレクトリです。このディレクトリに追加したファイルは、ネイティブアプリでは画面として、web ではページとして扱われます。デフォルトテンプレートでは src/app に配置されています。
ルートレイアウト： src/app/_layout.tsx ファイルです。ヘッダーやタブバーなど、複数のルート間で一貫させたい共有 UI 要素を定義します。
ファイル名の規約： index.tsx などの Index ファイル名は、親ディレクトリと一致し、パスセグメントを追加しません。たとえば、src/app ディレクトリ内の index.tsx は / ルートと一致します。
ルートファイルは React コンポーネントをデフォルト値としてエクスポートします。拡張子は .js、.jsx、.ts、.tsx のいずれかを使用できます。
Android、iOS、web は統一されたナビゲーション構造を共有します。

上記のリストで始めるには十分です。すべての機能の一覧については、Expo Router 紹介を参照してください。

1

スタックに新しい画面を追加する

src/app ディレクトリ内に about.tsx という名前の新しいファイルを作成しましょう。ユーザーが /about ルートに移動したときに、画面名を表示します。

src/app/about.tsx

import { Text, View, StyleSheet } from 'react-native';

export default function AboutScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>About screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
  },
});

src/app/_layout.tsx 内で:

<Stack.Screen /> コンポーネントと options プロパティを追加して、/about ルートのタイトルを更新します。
options プロパティを追加して、/index ルートのタイトルを Home に更新します。

src/app/_layout.tsx

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="about" options={{ title: 'About' }} />
    </Stack>
  );
}

Stack とは何ですか？

スタックナビゲーターは、アプリ内のさまざまな画面間を移動するための基盤です。Android では、スタックされたルートが現在の画面の上にアニメーションで重なります。iOS では、スタックされたルートが右からアニメーションで表示されます。Expo Router は、新しいルートを追加するためのナビゲーションスタックを作成する Stack コンポーネントを提供します。

2

画面間を移動する

Expo Router の Link コンポーネントを使用して、/index ルートから /about ルートに移動します。これは、指定された href プロパティを持つ <Text> をレンダリングする React コンポーネントです。

src/app/index.tsx 内で、expo-router から Link コンポーネントをインポートします。
<Text> コンポーネントの後に Link コンポーネントを追加し、href プロパティに /about ルートを渡します。
Link コンポーネントに fontSize、textDecorationLine、color のスタイルを追加します。<Text> コンポーネントと同じプロパティを受け取ります。

src/app/index.tsx

import { Text, View, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
      <Link href="/about" style={styles.button}>
        Go to About screen
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
  button: {
    fontSize: 20,
    textDecorationLine: 'underline',
    color: '#fff',
  },
});

アプリの変更を確認しましょう。Link をクリックして /about ルートに移動します。

3

not-found ルートを追加する

ルートが存在しない場合、Expo Router はそのルートに対してデフォルトの画面を表示します。+not-found ルートを使用すると、モバイルと web でその画面をカスタムのフォールバック画面に置き換えられます。Expo Router は、このケースを処理するために特別な +not-found.tsx ファイルを使用します。

src/app ディレクトリ内に +not-found.tsx という名前の新しいファイルを作成し、NotFoundScreen コンポーネントを追加します。
Stack.Screen の options プロパティを追加して、このルートのカスタム画面タイトルを表示します。
Link コンポーネントを追加して、フォールバックルートである / ルートに移動します。

src/app/+not-found.tsx

import { View, StyleSheet } from 'react-native';
import { Link, Stack } from 'expo-router';

export default function NotFoundScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Oops! Not Found' }} />
      <View style={styles.container}>
        <Link href="/" style={styles.button}>
          Go back to Home screen!
        </Link>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    fontSize: 20,
    textDecorationLine: 'underline',
    color: '#fff',
  },
});

これをテストするには、URL パスを変更しやすい web ブラウザで http://localhost:8081/123 URL に移動します。アプリには NotFoundScreen コンポーネントが表示されるはずです。

4

ボトムタブナビゲーターを追加する

この時点で、src/app ディレクトリのファイル構造は次のようになっています。

src

app

_layout.tsxルートレイアウト

index.tsxルート '/' に一致

about.tsxルート '/about' に一致

+not-found.tsxすべての 404 ルートに一致

アプリにボトムタブナビゲーターを追加し、既存の Home と About 画面を再利用してタブレイアウトを作成します。これは、X や Bluesky など、多くのソーシャルメディアアプリで一般的なナビゲーションパターンです。また、ルートレイアウトでスタックナビゲーターを使用することで、+not-found ルートが他のネストされたナビゲーターの上に表示されるようにします。

src/app ディレクトリ内に (tabs) サブディレクトリを追加します。この特別なディレクトリは、ルートをグループ化してボトムタブバーに表示するために使われます。
ディレクトリ内に (tabs)/_layout.tsx ファイルを作成します。これは、ルートレイアウトとは別のタブレイアウトを定義するために使用されます。
既存の index.tsx と about.tsx ファイルを (tabs) ディレクトリ内に移動します。src/app ディレクトリの構造は次のようになります。

src

app

_layout.tsxルートレイアウト

+not-found.tsxすべての 404 ルートに一致

(tabs)

_layout.tsxタブレイアウト

index.tsxルート '/' に一致

about.tsxルート '/about' に一致

ルートレイアウトファイルを更新して、(tabs) ルートを追加します。

src/app/_layout.tsx

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

(tabs)/_layout.tsx 内に NativeTabs コンポーネントを追加して、ボトムタブレイアウトを定義します。ネイティブタブは、Android と iOS でプラットフォームのネイティブなタブバーを使用します。

src/app/(tabs)/_layout.tsx

import { NativeTabs } from 'expo-router/native-tabs';

export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="about">
        <NativeTabs.Trigger.Label>About</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

ネイティブタブは画面にヘッダーを追加しないため、Home と About 画面にはヘッダーが表示されなくなります。web では、タブはページ上部にラベルの一覧として表示されます。

新しいボトムタブが表示されたアプリを確認してみましょう。

すべてのプラットフォームで表示されたボトムタブナビゲーター

5

ボトムタブナビゲーターの外観を更新する

現時点では、ボトムタブナビゲーターはアプリのスタイルと合っていません。たとえば、タブにアイコンが表示されず、タブバーの色がアプリの背景色と一致していません。

src/app/(tabs)/_layout.tsx ファイルを修正して、タブバーアイコンを追加します。

各 NativeTabs.Trigger の内部に NativeTabs.Trigger.Icon コンポーネントを追加します。md プロパティは Android 用の Material Symbols の名前を受け取ります。sf プロパティは iOS 用の SF Symbols の名前を受け取ります。
default と selected のキーを持つオブジェクトを sf プロパティに渡します。iOS では、タブがアクティブのときに selected のアイコンが表示されます。
NativeTabs コンポーネントに tintColor プロパティを追加し、値を #ffd33d に設定します。これにより、アクティブなタブのアイコンとラベルの色が変わります。

src/app/(tabs)/_layout.tsx

import { NativeTabs } from 'expo-router/native-tabs';

export default function TabLayout() {
  return (
    <NativeTabs
      tintColor="#ffd33d"
    >
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: 'house', selected: 'house.fill' }}
          md="home"
        />
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="about">
        <NativeTabs.Trigger.Label>About</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: 'info.circle', selected: 'info.circle.fill' }}
          md="info"
        />
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

アイコンにはインストール手順は必要ありません。Android では、デフォルトテンプレートに含まれる expo-symbols ライブラリが Material Symbols を提供します。iOS では、SF Symbols はシステムの一部です。web では、タブにはラベルのみが表示されます。

backgroundColor プロパティを使って、タブバーの背景色も変更しましょう。

src/app/(tabs)/_layout.tsx

<NativeTabs tintColor="#ffd33d" backgroundColor="#25292e">

backgroundColor プロパティは、Android と web でタブバーに #25292e を適用します。iOS 26 以降では、backgroundColor は効果がありません。タブバーは Liquid Glass を使用し、デバイスのライトまたはダークの外観に従います。

これでアプリにカスタムボトムタブナビゲーターが追加されました。

カスタムボトムタブナビゲーター

6

Android のリップルとインジケーターの色を更新する

Android では、タブバーはまだデフォルトの Material 3 テーマの 2 つの色を使用しています。タブを押すと、リップルエフェクトが表示されます。アクティブなタブには、アイコンの背後にインジケーターが表示されます。どちらの色もアプリのカラーパレットと一致していません。

src/app/(tabs)/_layout.tsx の NativeTabs コンポーネントに、indicatorColor と rippleColor プロパティを追加します。

src/app/(tabs)/_layout.tsx

<NativeTabs
  tintColor="#ffd33d"
  backgroundColor="#25292e"
  indicatorColor="rgba(255, 211, 61, 0.2)"
  rippleColor="rgba(255, 211, 61, 0.3)"
>

上記のコードでは:

indicatorColor は、Android ではアクティブなタブの背後にあるインジケーターの色を設定し、web ではアクティブなタブの背景色を設定します。
rippleColor は、Android でユーザーがタブを押したときに表示されるリップルエフェクトの色を設定します。

これで、リップルとインジケーターがアクティブなタブの黄色を使用するようになりました。

まとめ

第 2 章：ナビゲーションを追加する

アプリにスタックとタブナビゲーターを追加しました。

この章を読了にする

次の章では、アプリの最初の画面を構築する方法を学びます。

次へ：アプリの最初の画面を構築する