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
Je zou eens kunnen kijken naar de
executeWhenAppReady() functie van
ons app-helper script. Het zorgt ervoor dat je website niet probeert te communiceren met de app voordat deze klaar is of wanneer je website wordt geladen met een gewone browser (ReferenceError, functie is niet gedefinieerd).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,
isRateAction: false,
isPastNotificationsAction: 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>