NativeScript-탐색

탐색을 통해 사용자는 원하는 화면으로 빠르게 스 와이프하거나 앱을 탐색하거나 특정 작업을 수행 할 수 있습니다. 탐색 구성 요소는 간단한 버튼 클릭을 사용하여 더 복잡한 패턴에 대한 탐색을 구현하는 데 도움이됩니다.

탐색은 NativeScript의 핵심 버전과 각도 버전간에 크게 다릅니다. 핵심 프레임 워크 탐색은 탐색 프로세스의 기초이지만 NativeScript의 Angular 모델은 핵심 탐색 개념을 채택하고이를 확장하여 Angular 프레임 워크와 호환되도록합니다.

이 장에서 핵심 탐색 개념과 탐색의 각도 채택을 살펴 보겠습니다.

핵심 개념

이 장의 핵심 NativeScript에서 탐색이 어떻게 작동하는지 이해하겠습니다.

NativeScript에서 탐색은 아래 지정된대로 적용되는 방향에 따라 네 가지 범주로 나뉩니다.

• 앞으로 탐색

• 뒤로 탐색

• 측면 탐색

• 하단 탐색

앞으로 탐색

앞으로 탐색 은 사용자를 다음 수준의 계층 구조에서 화면으로 탐색하는 것을 의미합니다. 두 개의 NativeScript 구성 요소를 기반으로합니다.Frame 과 Page.

Frame

프레임은 탐색을위한 루트 수준 구성 요소입니다. 보이는 컨테이너는 아니지만 페이지 간 전환을위한 컨테이너 역할을합니다.

간단한 예는 다음과 같습니다.

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

여기,

프레임은 추천 페이지 페이지 구성 요소를 탐색 (또는로드)하고 렌더링합니다.

Page

페이지는 프레임 구성 요소 옆에 있으며 UI 구성 요소의 컨테이너 역할을합니다. 간단한 예는 아래에 정의되어 있습니다.

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

여기,

• 처음에 Page는 화면의 모든 UI 구성 요소를로드하고 렌더링합니다.

• 사용자가 버튼을 클릭하면 사용자가 another-page 페이지.

뒤로 탐색

뒤로 탐색 방법을 사용하면 한 앱 내에서 또는 다른 앱간에 화면을 뒤로 이동할 수 있습니다. 순방향 탐색의 반대 방향입니다. 간단한 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 각도 탐색 개념은 다음과 같이 섹션으로 분류 할 수 있습니다.

• 페이지 라우터 아웃렛 태그

• nsRouterLink 매력

• RouterExtension 클래스

• 커스텀 라우터 재사용 전략

이 섹션에서 위의 모든 각도 탐색에 대해 알아 보겠습니다.

페이지 라우터 아울렛

앞에서 배운 것처럼 페이지 라우터 아웃렛은 Angular의 라우터 아웃렛을 대체합니다. page-router-outlet은 Nativescript 핵심 탐색 프레임 워크의 프레임 및 페이지 전략을 래핑합니다. 각 페이지 라우터 출력은 새 프레임 구성 요소를 만들고 출력에 구성된 각 구성 요소는 페이지 구성 요소를 사용하여 래핑됩니다. 그런 다음 기본 탐색 방법을 사용하여 다른 페이지 / 경로를 탐색합니다.

라우터 링크 (nsRouterLink)

nsRouterLink는 Angular의 RouterLink를 대체합니다. UI 구성 요소가 경로를 사용하여 다른 페이지에 연결할 수 있습니다. nsRouterLink는 다음 두 가지 옵션도 제공합니다.

pageTransition− 페이지 전환 애니메이션을 설정합니다. true는 기본 전환을 활성화합니다. false는 전환을 비활성화합니다. 슬라이드, 페이드 인 등과 같은 특정 값은 특정 전환을 설정합니다.

clearHistory − true는 nsRouterLink의 탐색 기록을 지 웁니다.

간단한 예제 코드는 다음과 같습니다.

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

라우터 확장

NativeScript는 RouterExtensions 클래스를 제공하고 핵심 NativeScript의 탐색 기능을 노출합니다.

RouterExtensions에 의해 노출되는 메소드는 다음과 같습니다.

• navigate

• navigateByUrl

• back

• canGoBack

• backToPreviousPage

• canGoBackToPreviousPage

RouterExtensions를 사용하는 간단한 예제 코드는 다음과 같습니다.

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

사용자 지정 경로 재사용 전략

NativeScript는 사용자 지정 경로 재사용 전략 (RouterReuseStrategy)을 사용하여 모바일 애플리케이션의 아키텍처를 수용합니다. 모바일 애플리케이션은 웹 애플리케이션과 비교하여 특정 측면에서 다릅니다.

예를 들어, 사용자가 페이지에서 벗어나면 웹 애플리케이션에서 페이지가 파괴되고 사용자가 페이지를 탐색 할 때 페이지를 다시 만들 수 있습니다. 그러나 모바일 애플리케이션에서는 페이지가 보존되고 재사용됩니다. 이러한 개념은 라우팅 개념을 설계 할 때 고려됩니다.

노선

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 프레임 워크와 유사한 방식으로 노출하여 핵심 탐색 전략을 사용합니다.