nativescript ionic template
1.0.0
¡Aplicaciones móviles nativas con NativeScript y aplicaciones web (móvil primero) con estilos y componentes iónicos que comparten el mismo código con Angular!
Esta plantilla utiliza la navegación predeterminada de Angular, la navegación de Ionic 3 no se recomienda desarrollar sitios web, por lo tanto, no se recomienda utilizar componentes iónicos que requieran navegación iónica. Sin embargo, en esta plantilla puede encontrar un ejemplo de cómo usar componentes como el menú lateral sin depender de la navegación.
Usando esta plantilla, puede crear una aplicación web (móvil primero) utilizando componentes Ionic 3 y una aplicación nativa móvil usando NativeScript con el mismo código , ¡yay! ?
Para obtener más detalles, puede consultar el excelente artículo del equipo de NativeScript sobre el intercambio de códigos entre web y móvil con Angular y NativeScript : https://www.natescript.org/blog/code-sharing-between-web-and-mobile-with-angular-and-natescript
Consulte el excelente video de Sebastian Witalec sobre el código de compartir entre aplicaciones web y nativas
npm install (It's required to create the symlinks at the first time before to execute the app)
ng serve
cd nativescript
npm install
npm run livesync (Required to detect changes and reload the app from the simulator/device)
npm run ios (using other terminal)
Ver comandos disponibles aquí: comandos de semillas
| Dominio | Acción |
|---|---|
npm install -g @angular/cli | Instale el cli angular. Recuerde ver la documentación aquí |
ng g module [name] | Generar un nuevo módulo. Recomendado para crear secciones de su aplicación que cargarán componentes con carga perezosa. |
ng g component [name] | Genere un nuevo componente en el directorio actual. Recuerde agregar la propiedad ModuleId moduleId: module.id en cada componente |
ng g service [name] | Generar un nuevo servicio. La app/providers/ ruta se recomienda para servicios compartidos entre varios componentes. |
NativeScript requiere el unicode del icono, puede encontrar el unicode con el nombre del icono desde el contenido del archivo src/fonts/ionicons.svg y luego puede usarlo desde un <Label> o <Button> , ejemplo:
// name: ion-ios-contact, unicode: 
<Button class="ion-icon" fontSize="25" text=""></Button>
Teléfono objetivo y plantillas de tableta individualmente. Se admiten las siguientes extensiones:
| Extensión | Plataforma |
|---|---|
.{html/scss} | Plataforma web. Utilizado desde el móvil cuando no hay extensión .tns |
.tns.{html/scss} | Solo para móviles |
.tns.ios.{html/scss} | Solo para iOS |
.tns.android.{html/scss} | Solo para Android |
.tns.ios.phone.{html/scss} | Solo para el teléfono iOS |
.tns.android.phone.{html/scss} | Solo para el teléfono Android |
| Sintaxis | Significado | Resultado esperado |
|---|---|---|
{{ title }}{{ getTitle() }} | Renderizar un valor dinámicamente, esta expresión se evaluará en tiempo de ejecución. | |
[src]="imageUrl" | Enlace de la propiedad: vincule una propiedad de un elemento DOM a un campo del componente. | |
[attr.colspan]="colSpan" | Atributo vinculante | |
[class.selected]="user.selected" | Vínculos de clase : agregue una clase dinámicamente. | |
[style.color]="isActive? 'green': 'red'" | Atinción de estilo | |
(tap)="onSave($event)" | Vinculación de eventos | |
(keyup.enter)="onEnter()" | Filtrado de eventos | |
#email (keyup.enter)="onEnter(email.value) | Variables de plantilla | |
[(ngModel)]="user.email" | Atención de dos vías . Se requiere importar formsmodule . | |
{{ price | currency:'AUD' }} | Tuberías: datos de formato. | |
@Input('input-property') myData;<example [input-property]="data"> | Propiedades de entrada: datos de entrada para el componente. | |
@Output('output-property') change= new EventEmitter();this.change.emit({msg: 'Hi!'});<example (output-property)="onChange($event)"> | Propiedades de salida: elevar los eventos del componente. | onchange ({msg}) { console.log (msg) } |
| Sean Perkins | Juan Nicholls |
¿Creo en los unicornios? Apoyame, si tú también lo haces.
Hecho con ❤️
