Nativescript Template

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

Nativescript-angular mit SeitenRawer und Tabview

Dies ist die ultimative Vorlage mit einer verbesserten Struktur, mit der Sie Ihre erste App oder Ihr Kundenprojekt in kürzester Zeit starten können.

Überblick

Wir alle kennen den langsamen Prozess der Einrichtung des Projekts und des Erstellens einer funktionierenden Basis, bevor wir Funktionen hinzufügen können. Mit dieser Vorlage erhalten Sie eine voll funktionsfähige Anwendung mit Sidedrawer und Tabview aus dem Feld.

Perfekt für Anfänger und Profis.

Entwickeln Sie mit den Best Practices Ihre erste echte mobile Anwendung in kürzester Zeit.

NativesScript -Vorlage, die aus NativesScript -SidedRawer- und Tabview -Komponenten besteht:

Verweise auf einzelne Plugins, die in dieser Vorlage verwendet werden:

• https://market.nativescript.org/plugins/tns-template-drawer-navigation-ng
• https://market.nativescript.org/plugins/tns-template-blank-ng
• https://market.nativescript.org/plugins/tns-template-tab-navigation-ng

Installation:

Schnell:

1. Installieren Sie node.js https://nodejs.org/

2. npm install -g nativescript

3. Überprüfen Sie, ob die NativeScript -CLI tns arbeitet

4. Installieren Sie Android Studio (oder iOS -Äquivalent) https://developer.android.com/studio/

• 4.1 Open Android Studio -> AVD Manager -> Emulator erstellen

5. (Optional aber nützlich) Installieren

Laufen:

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

2. cd Nativescript-Template

3. tns device android --available-devices oder tns device ios --available-devices

4. tns run android / tns run android --device {device name} oder tns run ios / `TNS Run iOS -DeVice {Gerätename} aus.

Wenn Sie Sidekick verwenden

4. Öffnen Sie den Kumpel

• 4.1 Projekt hinzufügen

• 4.2 Emulator auswählen

• 4.3 Lauf

Architektur

Die radSidedRawer -Komponente wird als Anwendungsstartpunkt eingerichtet in:

• /app-component.ts - Legt den Inhalt der Seitenschubladen ein und definiert einen Seitenrouter -Outlet für die Seiten.

RadSidedRawer hat die folgende Komponentenstruktur:

• RadSideDrawer - Die Komponente zum Anzeigen einer Schublade auf der Seite.
• tkDrawerContent -Richtlinie - markiert die Komponente, die den Schubladeninhalt enthält.
• tkMainContent -Anweisung - markiert die Komponente, die den Hauptinhalt der App enthält.

In diesen Ordnern befinden sich fünf leere Komponenten:

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

Styling

Diese Vorlage ist eingerichtet, um SASS zum Styling zu verwenden. Alle verwendeten Klassen basieren auf dem {N} -Kore -Thema - wenden Sie sich an die Dokumentation, um zu verstehen, wie Sie es anpassen. Überprüfen Sie es, um zu sehen, welche Klassen Sie für welche Komponente verwenden können.

Es verfügt über 4 globale Style -Dateien, die sich am Root des App -Ordners befinden:

• _app-variables.scss - Hält die globalen SASS -Variablen, die auf den Stilen jeder Komponente importiert werden.
• _app-common.scss - Das globale Blatt für gemeinsames Stil. Diese Stilregeln werden sowohl auf Android als auch auf iOS angewendet.
• app.android.scss - Das globale Android -Stilblatt. Diese Stilregeln werden nur auf Android angewendet.
• app.ios.scss - Das globale iOS -Stilblatt. Diese Stilregeln werden nur auf iOS angewendet.