NativeScript - Gezinme

Gezinme, kullanıcıların istedikleri ekrana hızlıca kaydırmalarını veya bir uygulamada gezinmelerini veya belirli bir eylemi gerçekleştirmelerini sağlar. Gezinme bileşeni, daha karmaşık kalıplar için basit düğme tıklamaları kullanarak gezinme uygulamanıza yardımcı olur.

Gezinme, NativeScript'in çekirdek ve açısal sürümü arasında büyük ölçüde farklılık gösterir. Temel çerçeve gezintisi gezinme sürecinin temelini oluştururken, NativeScript'in Angular modeli temel gezinme kavramını benimser ve onu Angular çerçeveyle uyumlu hale getirmek için genişletir.

Bu bölümde hem temel navigasyon kavramını hem de navigasyonun açısal olarak benimsenmesini görelim.

Temel Kavramlar

Bu bölümde temel NativeScript'te gezinmenin nasıl çalıştığını anlayalım.

NativeScript'te gezinme, aşağıda belirtildiği gibi uygulandığı yöne göre dört farklı kategoriye ayrılmıştır -

• İleri navigasyon

• Geriye doğru gezinme

• Yanal navigasyon

• Alt gezinme

İleri Navigasyon

İleri Gezinme , kullanıcıları bir sonraki hiyerarşi düzeyindeki ekrana yönlendirmeyi ifade eder. İki NativeScript bileşenine dayanır,Frame ve Page.

Frame

Çerçeve, gezinme için kök düzeyinde bileşendir. Görünür bir kap değildir, ancak sayfalar arasındaki geçişler için bir kap görevi görür.

Basit bir örnek aşağıdaki gibidir -

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

Buraya,

Çerçeve, öne çıkan sayfa sayfa bileşenine gider (veya yükler) ve onu oluşturur.

Page

Sayfa, Çerçeve bileşeninin yanındadır ve UI bileşeni için bir kap görevi görür. Basit bir örnek aşağıda tanımlanmıştır -

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

Buraya,

• Başlangıçta Sayfa, ekranın tüm UI bileşenini yükler ve onu oluşturur.

• Kullanıcı düğmeyi tıkladığında, kullanıcıyı şuraya yönlendirecektir: another-page sayfa.

Geri Gezinme

Geriye doğru gezinme yöntemi, bir uygulama içindeki veya farklı uygulamalar arasında ekranlar arasında geriye doğru hareket sağlar. İleri navigasyonun ters yönüdür. Önceki sayfaya geri dönmek için basit goBack () yöntemi kullanılır.

Aşağıda tanımlanmıştır -

<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>

Buraya,

goBack() yöntem kullanıcı düğmeye dokunduğunda tetiklenecektir. goBack() varsa, kullanıcıları önceki sayfaya götürür.

Yanal Navigasyon

Yanal gezinme, aynı hiyerarşi düzeylerindeki ekranlar arasında gezinmeyi ifade eder. Göbek desenine dayanmaktadır. BottomNavigation, Tabs, TabView, SideDrawer ve Modal View gibi belirli gezinme bileşenleri aracılığıyla etkinleştirilir.

Basit bir örnek aşağıdaki gibi tanımlanmıştır -

<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>

Buraya,

• navigateToFeatured işlevi, kullanıcıyı öne çıkan sayfaya götürmek için navigate () yöntemini kullanır.

• Benzer şekilde, navigateToSearch işlevi kullanıcıyı arama sayfasına yönlendirecektir.

Hub sayfasına, sayfa ekranında bulunan gezinme yöntemi kullanılarak da ulaşılabilir ve biri goBack () yöntemi kullanılarak hub sayfasından çıkarılabilir.

Basit bir örnek aşağıdaki gibidir -

<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>

Altta ve Sekmede Gezinme

Mobil uygulamalarda en yaygın gezinme stili sekme tabanlı gezinmedir. Sekmede Gezinme, ekranın altında veya başlığın altında üstte düzenlenmiştir. TabView ve BottomNavigation bileşeni kullanılarak elde edilir .

Açısal tabanlı gezinme

NativeScript, açısal yönlendirme konseptine uyum sağlamak için gezinme konseptini genişletir. NativeScript, Angular RouterModule'ü genişleterek NativeScriptRouterModule adlı yeni bir modül sağlar.

NativeScript açısal gezinme kavramı aşağıdaki gibi bölümlere ayrılabilir -

• sayfa yönlendirici çıkış etiketi

• nsRouterLink çekici

• RouterExtension sınıfı

• Özel Yönlendirici Yeniden Kullanım Stratejisi

Bu bölümde yukarıdaki tüm açısal gezinmeyi öğrenelim.

Sayfa Yönlendirici Çıkışı

Daha önce öğrendiği gibi, sayfa yönlendirici çıkışı, Angular'ın yönlendirici çıkışının yerini almıştır. page-router-outlet, Nativescript çekirdek gezinme çerçevesinin Çerçeve ve Sayfa stratejisini tamamlar. Her bir sayfa yönlendirici çıkışı yeni bir Çerçeve bileşeni oluşturur ve çıkıştaki her yapılandırılmış bileşen Sayfa bileşeni kullanılarak sarılır. Ardından, başka bir sayfaya / rotaya gitmek için yerel gezinme yöntemi kullanılır.

Yönlendirici Bağlantısı (nsRouterLink)

nsRouterLink, Angular's RouterLink'in yerini almıştır. UI bileşeninin rotayı kullanarak başka bir sayfaya bağlanmasını sağlar. nsRouterLink ayrıca iki seçenek sunar -

pageTransition- Sayfa geçiş animasyonunu ayarlamak için kullanılır. true, varsayılan geçişi etkinleştirir. false, geçişi devre dışı bırakır. Kayma, solma, vb. Gibi belirli değerler belirli geçişi ayarlar.

clearHistory - true, nsRouterLink'in gezinme geçmişini temizler.

Basit bir örnek kod aşağıdaki gibidir -

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

Yönlendirici Uzantısı

NativeScript, RouterExtensions sınıfını sağlar ve çekirdek NativeScript'in gezinme işlevini ortaya çıkarır.

RouterExtensions tarafından sunulan yöntemler aşağıdaki gibidir -

• navigate

• navigateByUrl

• back

• canGoBack

• backToPreviousPage

• canGoBackToPreviousPage

RouterExtensions kullanan basit bir örnek kod aşağıdaki gibidir -

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

Özel Rota Yeniden Kullanım Stratejisi

NativeScript, bir mobil uygulamanın mimarisine uyum sağlamak için özel bir yol yeniden kullanım stratejisi (RouterReuseStrategy) kullanır. Bir mobil uygulama, bir web uygulamasına kıyasla belirli yönlerden farklılık gösterir.

Örneğin, bir web uygulamasında, kullanıcı sayfadan uzaklaştığında ve kullanıcı sayfaya gittiğinde yeniden oluşturduğunda sayfa yok edilebilir. Ancak mobil uygulamada sayfa korunacak ve yeniden kullanılacaktır. Yönlendirme konsepti tasarlanırken bu kavramlar dikkate alınır.

Rotalar

NativeScript Angular uygulamasında basit bir yönlendirme modülü aşağıdaki gibi olacaktır -

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 { }

Buraya,

Yönlendirme modülü, çok az istisna dışında Angular sürümüne çok benzer. Gerçekte, NativeScript, Angular çerçevesine benzer bir şekilde ortaya koyarak temel gezinme stratejisini kullanır.