本記事では、ArkTSにおけるNavigationコンポーネントの使用方法について解説します。toolbarConfigurationプロパティとrouter.pushUrlメソッドを組み合わせることで、ボトムナビゲーションによるページ切り替え、複数のNavigationの実装、およびNavDestinationサブページへの遷移を実現します。

ホームページの定義

まず、ホームページとなるIndex.etsファイルを作成します。以下に実装例を示します。

@Entry
@Component
struct HomePage {
  private navPathStack: NavPathStack = new NavPathStack()
  
  build() {
    Column() {
      Navigation(this.navPathStack) {
        Column() {
          Text("ホーム")
        }
      }
      .mode(NavigationMode.Auto)
      .toolbarConfiguration([
        {
          value: "ホーム",
          action: () => {}
        },
        {
          value: "マイページ",
          action: () => {
            router.pushUrl({
              url: "pages/MemberPage"
            })
          }
        }
      ])
      .hideTitleBar(true)
    }
  }
}

会員センターの定義

次に、会員センターとなるMemberPage.etsファイルを実装します。

@Entry
@Component
struct MemberPage {
  private navPathStack: NavPathStack = new NavPathStack()
  
  build() {
    Column() {
      Navigation(this.navPathStack) {
        Column() {
          Text("会員センター")
          Text("設定を開く")
            .onClick(() => {
              this.navPathStack.pushPathByName("SettingPage", null)
            })
        }
      }
      .mode(NavigationMode.Auto)
      .toolbarConfiguration([
        {
          value: "ホーム",
          action: () => {
            router.pushUrl({
              url: "pages/HomePage"
            })
          }
        },
        {
          value: "マイページ",
          action: () => {}
        }
      ])
      .hideTitleBar(true)
    }
  }
}

設定ページの定義

会員センター内から遷移する設定ページを実装します。

@Entry
@Component
struct SettingPage {
  build() {
    Column() {
      NavDestination() {
        Column() {
          Text("設定ページ")
          Text("各種設定項目")
        }
      }
    }
  }
}

実装のポイント

上記の実装では、2つのルートページ（ホームページと会員センター）それぞれにNavigationコンポーネントを配置しています。toolbarConfiguration内ではrouterを使用してページ間を遷移し、サブページ（設定ページ）への遷移ではNavPathStackを使用しています。このアプローチにより、ルートページ間の干渉を避けつつ、階層的なページ構造を実現しています。

ルートページ間の遷移にはrouter、同一Navigation内でのページ遷移にはNavPathStackを使用することで、ナビゲーションの階層を明確に分離できます。これにより、複雑なアプリケーションでも直感的なページ遷移を実装可能です。