Skip to content

Instantly share code, notes, and snippets.

@acacha

acacha/NOTES_MOIXONET_NATIVESCRIPT.md

Last active January 16, 2020 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acacha/d99dbf60e4a40253fe90f7acf1aece65 to your computer and use it in GitHub Desktop.
Save acacha/d99dbf60e4a40253fe90f7acf1aece65 to your computer and use it in GitHub Desktop.
Download ZIP
NOTES_MOIXONET_NATIVESCRIPT
Raw
NOTES_MOIXONET_NATIVESCRIPT.md

Aplicació a moixonet:

REPÀS NATIVESCRIPT

ARQUITECTURA

REPÀS EINES I CLI

ENTRY POINT/ FITXER PRINCIPAL

Sol ser app.js però es pot modificar al fitxer app/package.json

REPÀS DE NAVEGACIÓ/RUTES

Exemple app.js:

new Vue({
    render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            h(Home, { slot: 'mainContent' })
          ]
        )
      }
  }).$start();

Aquí s'indica Home com la pàgina inicial de navegació. A drawerContent hi ha la resta opcions del menú de navegació i s'utiltiza @tap="onNavigationItemTap(PAGENAME)

Exemple:

<Button text="To Details directly" @tap="$navigateTo(detailPage)" />

Alguns components ja impliquen una navegació en si mateixos:

  • Modal View
  • BottomNavigation & Tabs
  • SideDrawer

Components implicats en la navegació:

FRAMES

Exemple:

<Frame id="root-frame" defaultPage="main-page"/>
  • defaultPage: indica la pàgina inicial que s'ha de mostrar

SPLASH SCREEN I ICON

  • Sidekick hi ha un assitent per generar automàticament les icones i splash screen

RESPONSIVE A MOBILS

  • Concepte Device Fragmentations
  • Exemples metricas dispositius: https://material.io/resources/devices/
  • Qüestions a tenir en compte: https://www.nativescript.org/blog/supporting-multiple-screen-resolutions-in-your-nativescript-app
    • Screen size - The amount of physical space for displaying your application.
    • Density - The number of pixels in any given area on the screen. The typical unit of measure is dots per inch (dpi).
    • Density-independent pixels (dp) - This is a virtual unit of measure to allow layouts to be designed independent of density. There’s a neat formula for converting dp into screen pixels: px = dp * (dpi / 160)
    • Orientation - The screen’s orientation is considered to be landscape when it is wider than it is tall. In contrast, portrait orientation is when the screen is taller than it is wide. The orientation can change during the lifetime of an application as the user rotates the device.
    • Resource files - anything from layout files (.xml) to style sheets (.css) and images.

RESPONSIVE I NATIVESCRIPT

Tablet specific CSS

Just in case someone would only need tablet-specific CSS (like myself) and can't wait for an official solution (like myself), you can do:

const isTablet: boolean = device.deviceType == DeviceType.Tablet;

@Component({
  styleUrls: ['default.css', (isTablet ? 'tablet.css' : 'phone.css')]
})

Qualifiers

OPCIÓ: Plugin: nativescript-orientation

Sembla que només estan disponibles pel flavor vanilla javascript (ni angular ni vue)

tns plugin add nativescript-platform-css

Article: https://www.nativescript.org/blog/building-responsive-apps-with-nativescript

Dona error deprecated al instal·lar (no testejat a NativeScript 6):

tns plugin add nativescript-platform-css

Plugin Pro nativescript-platform-css

Repositori npm privat!:

FAB

Abans instal·lar plugin assegureu-vos git està net (git status). Així podrem comprovar quines modificaciones realitza al projecte el fet d'instal·lar un plugin.

Cal instal·lar com a plugin a dins del projecte nativescript:

tns plugin add @nstudio/nativescript-floatingactionbutton

Quines modificacions s'han realitzat al vostre projecte?

Per utilitzar el Plugin:

A fitxers app.js registreu el nou element:

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

en el nostre cas volem posar un FAB a la pàgina principal que permeti subscriure's/afegir nous canals als que estem subscrits a la app. La pàgina principal és Home.vue:

<fab
    @tap="fabTap"
    row="1"
    icon="res://ic_add_white"
    rippleColor="#f1f1f1"
    class="fab-button"
  ></fab>

SEARCH BAR

AUTOCOMPLETE

 tns plugin add nativescript-ui-autocomplete

A app.js:

import Vue from 'nativescript-vue';
import RadAutoComplete from 'nativescript-ui-autocomplete/vue';
Vue.use(RadAutoComplete);

RADLISTVIEW

tns plugin add nativescript-ui-listview

A app.js:

import Vue from 'nativescript-vue';
import RadListView from 'nativescript-ui-listview/vue';

Vue.use(RadListView);

Al component:

<RadListView ref="listView"
                   for="item in itemList"
                   @itemTap="onItemTap">
        <v-template>
          <StackLayout class="item" orientation="vertical">
            <Label :text="item.name" class="nameLabel"></Label>
            <Label :text="item.description" class="descriptionLabel"></Label>
          </StackLayout>
        </v-template>
      </RadListView>

Docs:

PULL TO REFRESH

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment