آموزش پیمایش در NativeScript

آموزش پیمایش در NativeScript

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پیمایش در NativeScript خواهیم پرداخت.

پیمایش کاربران را قادر می سازد تا به سرعت به صفحه مورد نظر خود بپیوندند یا از طریق یک برنامه پیمایش کنند و یا اقدام خاصی را انجام دهند. جز پیمایش به شما کمک می کند تا با استفاده از کلیک ساده دکمه ها روی الگوهای پیچیده تر ، پیمایش را پیاده سازی کنید.

پیمایش بین نسخه اصلی و زاویه ای NativeScript تفاوت اساسی دارد. در حالی که پیمایش چارچوب اصلی پایه ای برای فرآیند پیمایش است ، مدل Angular NativeScript مفهوم اصلی پیمایش را پذیرفته و آن را گسترش می دهد تا با چارچوب Angular سازگار شود.

بیایید هم مفهوم اصلی ناوبری و هم پذیرش زاویه ای ناوبری را در این درس ببینیم.

مفاهیم اصلی

بگذارید نحوه کارکرد پیمایش در NativeScript اصلی را در این فصل بدانیم.

در NativeScript، ناوبری بر اساس جهتی که در زیر مشخص شده است به چهار دسته مختلف تقسیم می شود –

• پیمایش به جلو
• پیمایش به عقب
• پیمایش جانبی
• پیمایش پایین

پیمایش به جلو

پیمایش به جلو به هدایت کاربران به صفحه در سطح بعدی سلسله مراتب اشاره دارد. این دو مولفه NativeScript ، Frame و Page است.

Frame

Frame جز level سطح ریشه برای پیمایش است. این یک ظرف قابل مشاهده نیست اما به عنوان ظرفی برای انتقال بین صفحات عمل می کند.

یک مثال ساده به شرح زیر است –

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

Frame به صفحه نمایش صفحه برجسته رفته و بارگیری می کند و آن را ارائه می دهد.

Page

صفحه در کنار مولفه Frame است و به عنوان ظرف م componentلفه UI عمل می کند. مثال ساده در زیر تعریف شده است –

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

در ابتدا ، صفحه تمام اجزای UI صفحه را بارگیری کرده و آن را ارائه می دهد.

وقتی کاربر روی دکمه کلیک می کند ، کاربر را به صفحه ای دیگر می برد.

پیمایش به عقب

روش پیمایش به عقب حرکت به عقب را از طریق صفحه های داخل یک برنامه یا از طریق برنامه های مختلف امکان پذیر می کند. این جهت مخالف جهت یابی به جلو است. از روش ساده () 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>

پیمایش پایین و پایین

رایج ترین سبک پیمایش در برنامه های تلفن همراه ، پیمایش مبتنی بر برگه است. Tab Navigation در پایین صفحه یا در بالای زیر هدر مرتب شده است. با استفاده از مولفه TabView و BottomNavigation به دست می آید.

ناوبری مبتنی بر زاویه

NativeScript مفهوم ناوبری خود را متناسب با مفهوم مسیریابی Angular گسترش می دهد. NativeScript با گسترش Angular RouterModule ماژول جدیدی را ارائه می دهد ، NativeScriptRouterModule.

مفهوم ناوبری زاویه ای NativeScript را می توان به بخش زیر طبقه بندی کرد –

• page-router-outlet tag
• nsRouterLink attractive
• RouterExtension class
• Custom RouterReuseStrategy

بیایید تمام ناوبری زاویه ای فوق را در این بخش بیاموزیم.

صفحه روتر خروجی

همانطور که قبلاً آموخته شد ، روتر خروجی صفحه جایگزینی روتر خروجی Angular است. page-router-outlet فریم و صفحه استراتژی چارچوب ناوبری اصلی Nativescript را می پیچد. هر صفحه خروجی روتر یک م Fraلفه Frame جدید ایجاد می کند و هر م componentsلفه پیکربندی شده در پریز با استفاده از مولفه Page بسته می شود. سپس ، از روش پیمایش بومی برای پیمایش به صفحه / مسیر دیگر استفاده می شود.

لینک روتر (nsRouterLink)

nsRouterLink جایگزین Angular’s ​​RouterLink است. این بخش UI را قادر می سازد تا با استفاده از مسیر به صفحه دیگری پیوند دهد. nsRouterLink همچنین دو گزینه زیر را فراهم می کند –

pageTransition – برای تنظیم انیمیشن انتقال صفحه استفاده می شود. true انتقال پیش فرض را امکان پذیر می کند. false انتقال را غیرفعال می کند. مقادیر خاص مانند اسلاید ، fadein و غیره ، انتقال خاص را تنظیم می کنند.

clearHistory  تاریخ پیمایش 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) برای سازگاری با معماری یک برنامه موبایل استفاده می کند. یک برنامه تلفن همراه در مقایسه با یک برنامه وب از جنبه های خاصی متفاوت است.

به عنوان مثال، هنگامی که کاربر از صفحه دور می شود ، صفحه می تواند در یک برنامه وب تخریب شود و هنگام حرکت کاربر به صفحه ، آن را دوباره ایجاد کند. اما ، در برنامه تلفن همراه ، صفحه حفظ و استفاده مجدد می شود. این مفاهیم در هنگام طراحی مفهوم مسیریابی مورد توجه قرار می گیرند.

مسیرها

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 نشان می دهد.

منبع.

لیست جلسات قبل آموزش NativeScript

1. آموزش NativeScript
2. معرفی NativeScript
3. آموزش نصب NativeScript
4. آموزش معماری NativeScript
5. آموزش برنامه Angular در NativeScript
6. آموزش تمپلیت ها در NativeScript
7. آموزش ویجت ها در NativeScript
8. آموزش ظروف طرح بندی در NativeScript