Nativescript Template

https://leevikopakkala.github.io/natipscript-template/

Ainthscript-Angular с SidedRawer и TabView

Это конечный шаблон с улучшенной структурой, который поможет вам запустить ваше первое приложение или проект клиента в кратчайшие сроки.

Обзор

Мы все знаем медленный процесс настройки проекта и создания функционирующей базы, прежде чем иметь возможность добавлять функции. С помощью этого шаблона вы получаете полностью функционирующее приложение из коробки с SidedRawer и Tabview.

Идеально подходит как для начинающих, так и для профессионалов.

Используя лучшие практики, разработайте свое первое настоящее мобильное приложение в ближайшее время.

Шаблон NativeScript, состоящий из компонентов NativeScript SideRawer и TabView:

Ссылки на отдельные плагины, используемые в этом шаблоне:

• https://market.nativescript.org/plugins/tns-template-rawer-navigation-ng
• https://market.nativescript.org/plugins/tns-template-lank-ng
• https://market.nativescript.org/plugins/tns-template-tab-navigation-ng

Установка:

Быстрый:

1. Установить node.js https://nodejs.org/

2. Установка Cli NPM npm install -g nativescript

3. Убедитесь, что CLI NativeScript работает tns

4. Установить Android Studio (или эквивалент iOS) https://developer.android.com/studio/

• 4.1 Open Android Studio -> AVD Manager -> Создать эмулятор

5. (Необязательно, но полезно) Установить https://www.nativescript.org/nativescript-sidekick

Бегать:

1. git clone https://github.com/LeeviKopakkala/Nativescript-Template

2. cd Nativescript-Template

3. tns device android --available-devices или tns device ios --available-devices

4. tns run android / tns run android --device {device name} или tns run ios / `TNS Run IOS -Device {имя устройства}

При использовании Sidekick

4. Открытый помощник

• 4.1 Добавить проект

• 4.2 Выберите эмулятор

• 4.3 бежать

Архитектура

Компонент RadsidedRawer настроен как отправная точка приложения в:

• /app-component.ts - устанавливает содержимое бокового ящика и определяет роутер маршрутизатора страниц для страниц.

RadsidedRawer имеет следующую структуру компонентов:

• RadSideDrawer - компонент для отображения ящика на странице.
• Директива tkDrawerContent - отмечает компонент, который будет держать содержание ящика.
• Директива tkMainContent - отмечает компонент, который будет держать основной контент приложения.

В этих папках расположены пять пустых компонентов:

• /browse
• /featured
• /home
• /search
• /settings

Стиль

Этот шаблон настроен на использование SASS для стиля. Все используемые классы основаны на основной теме {N} - обратитесь к документации, чтобы понять, как ее настроить. Проверьте это, чтобы увидеть, какие классы вы можете использовать для какого компонента.

Он имеет 4 файла глобального стиля, которые расположены в корне папки приложения:

• _app-variables.scss - содержит глобальные переменные SASS, которые импортируются в стилях каждого компонента.
• _app-common.scss - глобальный лист общего стиля. Эти правила стиля применяются как к Android, так и к iOS.
• app.android.scss - Глобальный лист стиля Android. Эти правила стиля применяются только к Android.
• app.ios.scss - Глобальный лист стиля iOS. Эти правила стиля применяются только к iOS.