آموزش تمپلیت ها در NativeScript

آموزش تمپلیت ها در NativeScript

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

NativeScript تمپلیت های آماده زیادی را برای ایجاد یک برنامه ساده خالی اما کاملاً کاربردی برای برنامه مبتنی بر پیچیده Tab فراهم می کند.

 استفاده از تمپلیت

همانطور که قبلاً آموخته شد ، می توان با استفاده از دستور create subcommand of tns ، برنامه جدید ایجاد کرد.

tns create <app-name> --template <tns-template-name>

اینجا،

• tns-template-name نام الگو است.

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

tns create <app-name> --template tns-template-blank

همان الگوی فوق را می توان با استفاده از TypeScript به شرح زیر ایجاد کرد –

tns create <app-name> --template tns-template-blank-ts

الگو ناوبری

از الگوی پیمایش برای ایجاد برنامه ای متوسط ​​تا پیچیده استفاده می شود. همراه با م componentلفه SideDrawer از قبل پیکربندی شده با چندین صفحه. مولفه SideDrawer شامل نمای پنهانی برای UI ناوبری یا تنظیمات مشترک است. از دستور زیر برای ایجاد برنامه مبتنی بر ناوبری استفاده کنید –

tns create <app-name> --template tns-template-drawer-navigation

الگو پیمایش تب

الگو ناوبری تب برای ایجاد برنامه مبتنی بر برگه استفاده می شود. همراه با مولفه TabView از قبل پیکربندی شده با چندین صفحه. برای ایجاد برنامه مبتنی بر برگه از دستور زیر استفاده کنید –

tns create <app-name> --template tns-template-tab-navigation

الگوی Master-Detail

از الگو Master-Detail برای ایجاد برنامه مبتنی بر لیست همراه با صفحه جزئیات برای هر مورد در لیست استفاده می شود.

tns create <app-name> --template tns-template-master-detail

الگوی سفارشی

برای ایجاد یک الگوی سفارشی ساده، باید الگوهای خالی را شبیه سازی کنیم. همانطور که قبلاً می دانید ، NativeScript از قالب هایJavaScript ،TypeScript ، Angular و Vue.js پشتیبانی می کند ، بنابراین می توانید هر زبانی را انتخاب کرده و زبان سفارشی خود را ایجاد کنید.

به عنوان مثال، با استفاده از دستور زیر الگوی ساده و سفارشی را از مخزن git کلون کنید –

git clone https://github.com/NativeScript/template-blank-ts.git

اکنون، این ساختار برنامه تلفن همراه را ایجاد می کند ، بنابراین شما می توانید هر گونه تغییر را انجام دهید و دستگاه android / iOS خود را اجرا کنید. این ساختار بر اساس لیست دستورالعمل ها است. بیایید دستورالعمل ها را به طور خلاصه مشاهده کنیم.

ساختار

• الگوی سفارشی شما باید شرایط زیر را داشته باشد –
• کد خود را در داخل پوشه روت برنامه خود قرار ندهید.
• یک پوشه جداگانه ایجاد کنید و قسمت ویژگی را به داخل آن اضافه کنید.
• صفحه، مدل ها و سرویس ها باید در قسمت ویژگی قرار بگیرند. این به ایجاد کد شسته و رفته و تمیز کمک می کند.
• پوشه صفحه را ایجاد کنید و داخل پرونده های .ts ، .xml ، .scss / css و غیره قرار دهید.

pack.json

فایل package.json را در پوشه اصلی الگوی برنامه خود قرار دهید. با استفاده از قالب ، مقداری برای خاصیت name ارائه دهید –

{
   "name": "tns-template-blank-ts", 
   displayName": "template-blank", 
}

برای ویژگی نسخه مقدار تعیین کنید. در زیر تعریف شده است –

"version": "3.2.1",

مقداری را برای ویژگی اصلی اختصاص دهید که نقطه اصلی ورود به برنامه شما را مشخص می کند. در زیر تعریف شده است –

"main": "app.js",

مقداری را برای خاصیت android اختصاص دهید. در زیر تعریف شده است –

"android": { 
   "v8Flags": "--expose_gc" 
},

ویژگی مخزن باید در داخل کد شما به شرح زیر مشخص شود –

"repository": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

استایل

استایل ها و مضامین را با استفاده از نحو زیر در الگوی برنامه خود وارد کنید –

@import '~nativescript-theme-core/scss/light';

ما همچنین می توانیم رنگ پس زمینه سفارشی را با استفاده از کد زیر اختصاص دهیم

/* Colors */ 
$background: #fff; 
$primary: lighten(#000, 13%);

منبع.

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

1. آموزش NativeScript
2. معرفی NativeScript
3. آموزش نصب NativeScript
4. آموزش معماری NativeScript
5. آموزش برنامه Angular در NativeScript