Cómo: Obtener y Establecer los Elementos de la Barra de Navegación de la App

Publicado en 14. octubre 2024 por Jan Bunk


Para algunos sitios web puede ser útil modificar dinámicamente los elementos de la barra de navegación de las apps. Puedes lograr esto con estas funciones de JavaScript.

Uso de las funciones de JavaScript

Quizá quieras consultar la función executeWhenAppReady() de nuestro script de ayuda de la aplicación. Garantiza que tu sitio web no intente interactuar con la aplicación antes de que esté lista o cuando tu sitio web se cargue utilizando un navegador normal (ReferenceError, function is not defined).

getNavigationBarItems

Usa esta función para obtener una lista de objetos que representan todos los elementos de la barra de navegación que se están mostrando actualmente.


<script>
    try {
        // returns a list of objects representing the navigation bar items
        let navigationBarItems = (await getNavigationBarItems())["navigationBarItems"];
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

setNavigationBarItems

Usa esta función para modificar los elementos de la barra de navegación que deberían mostrarse.


<script>
    try {
        // example for a navigation bar item object
        let newNavigationBarItem = {
            label: "Contact",
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: {
                name: "list"
            },
        };

        // get the currently displayed navigation bar items
        let allNavigationBarItems = (await getNavigationBarItems())["navigationBarItems"];

        // add the new navigation bar item to the list of navigation bar items
        allNavigationBarItems.push(newNavigationBarItem);

        // display the list of navigation bar items, including the new navigation bar item
        await setMenuItems(allNavigationBarItems);
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

Modificando el Menú de la App

Aquí tienes una lista de documentación de desarrolladores relacionada con el cambio dinámico del menú de la app. Asegúrate de ver la que aplica al diseño de tu app.