Nativescript Template

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

NativeScript-angular con Sidedrawer y Tabview

Esta es la plantilla definitiva con una estructura mejorada para ayudarlo a iniciar su primera aplicación o proyecto de cliente en tiempo.

Descripción general

Todos conocemos el lento proceso de configurar el proyecto y crear una base de funcionamiento antes de poder agregar características. Con esta plantilla obtiene una aplicación de funcionamiento completamente de la caja con Sidedrawer y TabView.

Perfecto para principiantes y profesionales por igual.

Usando las mejores prácticas, desarrolle su primera aplicación móvil real en tiempo.

Plantilla NativeScript compuesta por componentes nativeScript Sididrawer y TabView:

Referencias a complementos individuales utilizados en esta plantilla:

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

Instalación:

Rápido:

1. Instale node.js https://nodejs.org/

2. Instalar nativescript cli npm install -g nativescript

3. Verifique que NativeScript CLI esté funcionando tns

4. Instale Android Studio (o IOS equivalente) https://developer.android.com/studio/

• 4.1 Abrir Android Studio -> Avd Manager -> Crear emulador

5. (Opcional pero útil) Instale https://www.natescript.org/natescript-sidekick

Correr:

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

2. cd Nativescript-Template

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

4. tns run android / tns run android --device {device name} o tns run ios / `TNS Ej.

Si usa Sidekick

4. Abrochado

• 4.1 Agregar proyecto

• 4.2 Seleccionar emulador

• 4.3 Run

Arquitectura

El componente RadSididrawer se configura como punto de partida de la aplicación en:

• /app-component.ts : configura el contenido del cajón lateral y define una salida de enrutador de página para las páginas.

Radsididrawer tiene la siguiente estructura de componentes:

• RadSideDrawer : el componente para mostrar un cajón en la página.
• Directiva tkDrawerContent : marca el componente que contendrá el contenido del cajón.
• Directiva tkMainContent : marca el componente que contendrá el contenido principal de la aplicación.

Hay cinco componentes en blanco ubicados en estas carpetas:

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

Estilo

Esta plantilla está configurada para usar SASS para el estilo. Todas las clases utilizadas se basan en el tema central {n}: consulte la documentación para comprender cómo personalizarlo. Compruébelo para ver qué clases puede usar en qué componente.

Tiene 4 archivos de estilo global que se encuentran en la raíz de la carpeta de aplicaciones:

• _app-variables.scss : posee las variables SASS globales que se importan en los estilos de cada componente.
• _app-common.scss - La hoja de estilo común global. Estas reglas de estilo se aplican tanto a Android como a iOS.
• app.android.scss : la hoja de estilo de Android global. Estas reglas de estilo se aplican solo a Android.
• app.ios.scss : la hoja de estilo IOS global. Estas reglas de estilo se aplican solo a iOS.