Como: Obter e Definir os Itens da Barra de Navegação do App

Publicado em 14. outubro 2024 por Jan Bunk


Para alguns sites, pode ser útil modificar dinamicamente os itens da barra de navegação dos apps. Você pode fazer isso com essas funções JavaScript.

Usando as funções do JavaScript

Recomendamos que verifique a função executeWhenAppReady() do nosso script auxiliar de aplicação. Ele garante que seu site não tente interagir com o aplicativo antes que ele esteja pronto ou quando o site for carregado usando um navegador comum (ReferenceError, a função não está definida).

getNavigationBarItems

Use esta função para obter uma lista de objetos que representam todos os itens da barra de navegação que estão sendo exibidos atualmente.


<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

Use esta função para modificar os itens da barra de navegação que devem ser exibidos.


<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 o Menu do App

Aqui está uma lista de documentação de desenvolvedores relacionada a como mudar dinamicamente o menu do app. Certifique-se de que está vendo a documentação aplicável ao layout do seu app.