Componente del navegador de la interfaz de usuario de ReactJS Onsen

ReactJS Onsen-UI es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para desarrollar aplicaciones web híbridas y móviles HTML5 de una manera hermosa y eficiente. Navigatorresponsable de la transición de páginas y la gestión de las páginas de nuestra aplicación. Podemos usar el siguiente enfoque en ReactJS para usar el componente Onsen-UI Navigator.

Accesorios del navegador:

• renderPage: Es una función que toma como parámetro el objeto de ruta actual y devuelve un componente React.
• initialRouteStack: Se utiliza para denotar un arreglo que contiene las rutas iniciales del navegador.
• initialRoute: Se utiliza para denotar un arreglo que contiene la ruta inicial del navegador.
• onPrePush: es una función de devolución de llamada que se activa justo antes de que se envíe una página.
• onPostPush: es una función de devolución de llamada que se activa justo después de que se envía una página.
• onPrePop: es una función de devolución de llamada que se activa justo antes de que aparezca una página.
• onPostPop: es una función de devolución de llamada que se activa justo después de abrir una página.
• animación: se utiliza para indicar animaciones como diapositiva, elevación, atenuación y ninguna.
• animationOptions: se utiliza para especificar la duración, el retraso y el tiempo de la animación.
• swipeable: se utiliza para habilitar la funcionalidad de deslizar para abrir para iOS.
• swipePop: es una función opcional que se activa al deslizar para hacer estallar.
• onDeviceBackButton: es un controlador personalizado para el botón de retroceso del dispositivo.

Métodos del navegador:

• resetPage(ruta, opciones = {}): Este método se utiliza para restablecer la página actual. El parámetro de ruta indica la ruta a la que se debe restablecer la página.
• resetPageStack(ruta, opciones = {}): este método se utiliza para restablecer el navegador a la pila de páginas actual. El parámetro de ruta indica las rutas a las que se debe restablecer el navegador.
• pushPage(ruta, opciones = {}): este método se utiliza para enviar una página a la pila de páginas. El parámetro de ruta denota la ruta a la que el navegador debe empujar.
• popPage(options = {}): este método se usa para sacar una página de la pila de páginas.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install onsenui react-onsenui 

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import 'onsenui/css/onsen-css-components.css';
import { Navigator, Button } from 'react-onsenui';
  
export default function App() {
  
    return (
        <div style={{
            display: 'block', width: 500, paddingLeft: 30
        }}>
            <h6>ReactJS Onsen-UI Navigator Component</h6>
            <Navigator
                renderPage={(route) =>
                    <Button onClick={() => alert('Navigate Accordingly!')}>
                        {route.title}</Button>
                }
                initialRoute={{
                    title: 'Sample Navigator Button'
                }}
            />
        </div>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://onsen.io/v2/api/react/Navigator.html