Nativescript-navigation

NativeScript-ナビゲーション

ナビゲーションを使用すると、ユーザーは目的の画面にすばやくスワイプしたり、アプリをナビゲートしたり、特定のアクションを実行したりできます。 ナビゲーションコンポーネントは、単純なボタンクリックを使用して、より複雑なパターンへのナビゲーションを実装するのに役立ちます。

NativeScriptのコアバージョンと角度バージョンでは、ナビゲーションが大幅に異なります。 コアフレームワークナビゲーションはナビゲーションプロセスの基盤ですが、NativeScriptのAngularモデルはコアナビゲーションの概念を採用し、それを拡張してAngularフレームワークと互換性があるようにします。

この章では、ナビゲーションのコアコンセプトとナビゲーションの角度の採用の両方を見てみましょう。

コアコンセプト

この章では、ナビゲーションがコアNativeScriptでどのように機能するかを説明します。

NativeScriptでは、ナビゲーションは、以下に指定されているように、適用される方向に基づいて4つの異なるカテゴリに分割されます-

• 前方ナビゲーション
• 後方ナビゲーション
• 横方向のナビゲーション
• 下部ナビゲーション

フォワードナビゲーション

_Forward Navigation_は、階層の次のレベルの画面にユーザーをナビゲートすることを指します。 これは、 Frame と Page の2つのNativeScriptコンポーネントに基づいています。

フレーム

フレームは、ナビゲーションのルートレベルのコンポーネントです。 これは可視のコンテナではありませんが、ページ間の遷移のコンテナとして機能します。

簡単な例は次のとおりです-

<Frame id="featured" defaultPage="featured-page"/>

ここに、

Frameは、注目のページページコンポーネントに移動（またはロード）してレンダリングします。

ページ

ページはフレームコンポーネントの隣にあり、UIコンポーネントのコンテナーとして機能します。 簡単な例を以下に定義します-

<Page loaded="onPageLoaded">
   <ActionBar title="Item" class="action-bar">&lt/ActionBar>
   <AbsoluteLayout>
      <Label text="Label"/<
      <Button text="navigate('another-page')" tap="onTap"/>
   </AbsoluteLayout>
</Page>

ここに、

• 最初に、Pageは画面のすべてのUIコンポーネントをロードしてレンダリングします。
• ユーザーがボタンをクリックすると、ユーザーは*別のページ*ページに移動します。

後方ナビゲーション

後方ナビゲーション方式では、1つのアプリ内または異なるアプリ間で画面を逆方向に移動できます。 これは、順方向ナビゲーションの反対方向です。 単純なgoBack（）メソッドを使用して、前のページに戻ります。

以下に定義されています-

<Page class="page" loaded="onPageLoaded">
   <ActionBar title="Item" class="action-bar"></ActionBar>
   <StackLayout class="home-panel">
      <Button class="btn btn-primary" text="Back" tap="goBack"/>
   </StackLayout>
</Page>

ここに、

• goBack（）*メソッドは、ユーザーがボタンをタップしたときにトリガーされます。 * goBack（）*は、利用可能な場合、ユーザーを前のページに移動します。

ラテラルナビゲーション

横方向のナビゲーションとは、同じレベルの階層にある画面間のナビゲーションを指します。 ハブパターンに基づいています。 BottomNavigation、Tabs、TabView、SideDrawer、Modal Viewなどの特定のナビゲーションコンポーネントを介して有効になります。

簡単な例は以下のように定義されています-

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd">
   <ActionBar title="Hub" class="action-bar"></ActionBar>
   <StackLayout class="home-panel">
      <Button class="btn btn-primary" text="navigate('featured-page')" tap="navigateToFeatured"/>
      <Button class="btn btn-primary" text="navigate('search-page')" tap="navigateToSearch"/>
   </StackLayout>
</Page>

ここに、

• navigateToFeatured 関数は、navigate（）メソッドを使用して、ユーザーを特集ページにナビゲートします。
• 同様に、 navigateToSearch 関数はユーザーを検索ページにナビゲートします。

ハブページには、ページ画面で利用可能なナビゲートメソッドを使用して到達することもでき、goBack（）メソッドを使用してハブページから移動することもできます。

簡単な例は次のとおりです-

<Page class="page">
   <ActionBar title="Item" class="action-bar"></ActionBar>
   <StackLayout class="home-panel">
      <Button class="btn btn-primary" text="navigate('hub-page')" tap="navigateToHub"/>
      <Button class="btn btn-primary" text="goBack()" tap="goBack"/>
   </StackLayout>
</Page>

下部とタブのナビゲーション

モバイルアプリでの最も一般的なナビゲーションスタイルは、タブベースのナビゲーションです。 タブナビゲーションは、画面の下部またはヘッダーの下の上部に配置されます。 これは、_TabView_および_BottomNavigation_コンポーネントを使用して実現されます。

角度ベースのナビゲーション

NativeScriptは、ナビゲーションの概念を拡張して、Angularルーティングの概念に対応します。 NativeScriptは、Angular RouterModuleを拡張することにより、新しいモジュールNativeScriptRouterModuleを提供します。

NativeScript角度ナビゲーションの概念は、以下のようにセクションに分類できます-

• page-router-outletタグ
• 魅力的なnsRouterLink
• _RouterExtension_クラス
• カスタム_RouterReuseStrategy_

このセクションでは、上記のすべての角度ナビゲーションについて学習します。

ページルーターアウトレット

前に学習したように、page-router-outletはAngularのrouter-outletの代わりです。 page-router-outletは、Nativescriptコアナビゲーションフレームワークのフレームおよびページ戦略をラップします。 各ページルーターアウトレットは新しいフレームコンポーネントを作成し、アウトレットで構成された各コンポーネントはページコンポーネントを使用してラップされます。 次に、ネイティブのナビゲートメソッドを使用して、別のページ/ルートにナビゲートします。

ルーターリンク（nsRouterLink）

nsRouterLinkは、AngularのRouterLinkの後継です。 UIコンポーネントがルートを使用して別のページにリンクできるようにします。 nsRouterLinkは、以下の2つのオプションも提供します-

*pageTransition* -ページ遷移アニメーションを設定するために使用されます。 trueはデフォルトの遷移を有効にします。 falseは遷移を無効にします。 スライド、フェードインなどの特定の値は、特定のトランジションを設定します。

*clearHistory* -trueはnsRouterLinkのナビゲーション履歴をクリアします。

簡単なサンプルコードは次のとおりです-

<Button text="Go to Home" [nsRouterLink]="['/home']"
   pageTransition="slide" clearHistory="true"></Button>

ルーター拡張

NativeScriptはRouterExtensionsクラスを提供し、コアNativeScriptのナビゲーション機能を公開します。

RouterExtensionsによって公開されているメソッドは次のとおりです-

• ナビゲートする
• navigateByUrl
• back
• canGoBack
• backToPreviousPage
• canGoBackToPreviousPage

RouterExtensionsを使用した簡単なコード例は次のとおりです-

import { RouterExtensions } from "nativescript-angular/router";
@Component({
  //...
})
export class HomeComponent {
   constructor(private routerExtensions: RouterExtensions) { }
}

カスタムルート再利用戦略

NativeScriptは、カスタムルート再利用戦略（RouterReuseStrategy）を使用して、モバイルアプリケーションのアーキテクチャに対応します。 モバイルアプリケーションは、Webアプリケーションと比較して特定の点で異なります。

たとえば、ユーザーがページから移動するとWebアプリケーションでページが破棄され、ユーザーがページに移動するとページが再作成されます。 ただし、モバイルアプリケーションでは、ページは保持され、再利用されます。 これらの概念は、ルーティングの概念を設計する際に考慮されます。

ルート

NativeScript Angularアプリケーションの単純なルーティングモジュールは次のようになります-

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HomeComponent } from "./home.component";
import { SearchComponent } from "./search.component";
const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", component: HomeComponent },
   { path: "search", component: SearchComponent },
];
@NgModule({
   imports: [NativeScriptRouterModule.forRoot(routes)],
   exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

ここに、

ルーティングモジュールは、非常に少数の例外を除いて、Angularバージョンに非常に似ています。 実際には、NativeScriptはAngularフレームワークと同様の方法で公開することにより、コアナビゲーション戦略を使用します。