Hoe te: De items van de navigatiebalk van de app ophalen en instellen

Voor sommige websites kan het nuttig zijn om de items van de navigatiebalk van de apps dynamisch aan te passen. Dit kun je bereiken met deze JavaScript-functies.

De JavaScript-functies gebruiken

getNavigationBarItems

Gebruik deze functie om een lijst te krijgen van objecten die alle navigatiebalkitems vertegenwoordigen die momenteel worden weergegeven.

<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

Gebruik deze functie om de navigatiebalkitems aan te passen die moeten worden weergegeven.

<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 setNavigationBarItems(allNavigationBarItems);
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>