los puedes ver la documentacion de los temas aquí

Características

• Navegación declarativa.
• Pantallas (Screen).
• Fragmentos reutilizables.
• Drawer Navigation.
• Menús y acciones.
• Sistema de preferencias.
• Modales y notificaciones.
• Arquitectura modular.
• JSX nativo.
• Gestión automática del ciclo de vida.

Instalación

npm install voir-native

Importación

import {
    Screen,

    NavigationView,
    NavigationDrawer,
    NavItem,
    Action,

    Fragment,
    FragmentManager,
    FragmentHost,
    getFragmentManager,

    PreferenceScreen,
    ListPreference,
    CheckBoxPreference,
    SwitchPreference,
    TextPreference,

    Group,

    Modal,
    Toast,
    Snackbar

} from 'voir-native';

Screen

Una Screen representa una pantalla completa de la aplicación.

class HomeScreen extends Screen {

    title = 'Inicio';

    render() {
        return (
            <TextView text='Bienvenido'/>
        );
    }

}

Título

El título se muestra automáticamente en la AppBar.

title = 'Configuración';

NavigationView

Contenedor principal encargado de gestionar la navegación de la aplicación.

contentView.append(
    <NavigationView drawer navDrawer={callback} menus={actions} />
);

NavigationDrawer

Permite mostrar navegación lateral dentro del drawer.

<NavigationDrawer>
    <NavItem
        icon={Icons.home}
        label='Inicio'
    />

    <NavItem
        icon={Icons.settings}
        label='Configuración'
    />
</NavigationDrawer>

NavItem

Elemento de navegación utilizado dentro de NavigationDrawer.

<NavItem
    title='Perfil'
    icon={Icons.person}
    badge="2"
    id="profile"
    host={ProfileFragment}
/>

Action

Acciones mostradas en la AppBar.

actions = [
    new Action({
        id: 'search',
        icon: Icons.search
    })
];

Fragment

Los Fragment permiten reutilizar vistas dentro de una Screen.

class UserFragment extends Fragment {
    title="Usuario"
    render() {
        return (
            <TextView text='Usuario'/>
        );
    }

}

FragmentHost

Contenedor visual donde se renderizan los Fragment.

<FragmentHost defaultHost />

FragmentManager

Administrador encargado de las transiciones y pila de Fragment.

const manager = new FragmentManager();

Mostrar Fragment

manager.push(
    new UserFragment()
);

Reemplazar

manager.replace(
    new SettingsFragment()
);

Cerrar Fragment

manager.pop();

getFragmentManager

Obtiene el administrador asociado a una vista.

const manager = getFragmentManager(this);

PreferenceScreen

Pantalla especializada para configuración.

class SettingsScreen extends PreferenceScreen {
}

TextPreference

Preferencia básica.

<TextPreference
    label='Perfil'
    summary='Editar información personal'
/>

SwitchPreference

Preferencia con interruptor.

<SwitchPreference
    label='Notificaciones'
    key='notify'
    checked={true}
/>

CheckBoxPreference

Preferencia con casilla de selección.

<CheckBoxPreference
    label='Modo avanzado'
    checked={false}
/>

ListPreference

Permite seleccionar un valor de una lista.

<ListPreference
    label='Idioma'
    checked={1}
    entries={[
        'Español',
        'English',
        'Português'
    ]}
/>

Group

Agrupa elementos visualmente.

<Group title='Cuenta'>

    <TextPreference
        label='Perfil'
    />

    <TextPreference
        label='Seguridad'
    />

</Group>

Modal

Los modales permiten mostrar diálogos, formularios o contenido personalizado.

Modal simple

Modal({
    title: 'Confirmación',
    message: '¿Desea continuar?'
}).show();

Modal con botones

Modal({
    title: 'Eliminar archivo',
    message: 'Esta acción no se puede deshacer.'
})
.addButton('Cancelar')
.addButton('Eliminar', () => {
    deleteFile();
})
.show();

Modal personalizado

Modal({
    title: 'Nuevo usuario',
    content: (
        <ScrollView>
            <TextInput message='Nombre'/>
            <TextInput message='Email'/>
        </ScrollView>
    )
})
.show();

Toast

Mensaje temporal no intrusivo.

Toast simple

Toast('Guardado correctamente')
    .show();

Toast con duración

Toast('Guardado correctamente', 500)
    .show();

Snackbar

Notificación temporal mostrada en la parte inferior de la pantalla.

Snackbar simple

Snackbar(
    'Mi snackbar sin action.',
    2000
).show();

Snackbar con acción

const snack = Snackbar(
    'Snackbar con action'
);

snack
    .setAction('Cerrar', () => {
        snack.close();
    })
    .show();

Ciclo de Vida

Las Screen y Fragment comparten un ciclo de vida común.

onCreate()

onStart()

onResume()

onPause()

onStop()

onDestroy()

aun en desarrollo

Ejemplo Completo

class HomeScreen extends Screen {

    render() {
        return (
            <FragmentHost/>
        );
    }

    onCreate() {

        const manager = getFragmentManager(this);

        manager.push(
            new HomeFragment()
        );

    }

}

Arquitectura

Application │ ├── NavigationView │ ├── NavigationDrawer │ └── NavItem │ ├── Screen │ ├── FragmentHost │ ├── FragmentManager │ └── Fragment │ ├── PreferenceScreen │ ├── TextPreference │ ├── SwitchPreference │ ├── CheckBoxPreference │ └── ListPreference │ ├── Modal ├── Toast └── Snackbar

Filosofía

Voir Native extiende Tabris.js con una arquitectura orientada a pantallas y componentes reutilizables.

Cada Screen administra:

• Navegación.
• Menús.
• Drawer.
• Fragmentos.
• Preferencias.
• Ciclo de vida.

Todo mediante una API simple basada en JSX y componentes nativos.