Guida
Come utilizzare la navigazione nativa in Capacitor
Usando @capgo/capacitor-native-navigation
@capgo/capacitor-native-navigation Rende la navigazione nativa superiore, la barra dei tab bottom e le conchiglie di transizione della route su una singola schermata Capacitor WebView. Il tuo framework web gestisce ancora le route e il contenuto, mentre il nativo gestisce il frame dell'applicazione.
Installa e sincronizza
npm install @capgo/capacitor-native-navigation
npx cap sync
Configura il frame nativo
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
colors: {
tint: '#0f172a',
inactiveTint: '#64748b',
},
});
Rendi una barra di navigazione nativa
await NativeNavigation.setNavbar({
title: 'Inbox',
subtitle: 'Native chrome',
transparent: true,
backButton: { visible: false },
rightItems: [
{
id: 'compose',
title: 'Compose',
icon: {
svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>',
},
},
],
});
Rendi una barra dei tab nativa
await NativeNavigation.setTabbar({
selectedId: 'inbox',
labelVisibilityMode: 'selected',
icons: true,
colors: {
dynamic: true,
tint: '#0f172a',
inactiveTint: '#64748b',
},
tabs: [
{
id: 'inbox',
title: 'Inbox',
icon: {
svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="m4 13 4 4h8l4-4"/></svg>',
},
},
{
id: 'search',
title: 'Search',
icon: {
svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>',
},
},
],
});
Connetti gli eventi nativi al tuo router
Le barre native emettono un'intento. Il tuo router esegue ancora il cambio di rotta:
await NativeNavigation.addListener('navbarBack', () => {
router.back();
});
await NativeNavigation.addListener('navbarItemTap', ({ id }) => {
if (id === 'compose') router.push('/compose');
});
await NativeNavigation.addListener('tabSelect', ({ id }) => {
router.push(`/${id}`);
});
Anima i cambiamenti di rotta
Utilizza un'operazione di transizione intorno all'aggiornamento della rotta web normale:
const transition = await NativeNavigation.beginTransition({
direction: 'forward',
});
router.push('/message/42');
await router.ready?.();
await NativeNavigation.setNavbar({
title: 'Message',
backButton: { visible: true, title: 'Inbox' },
});
await NativeNavigation.finishTransition({
id: transition.id,
direction: 'forward',
});
Aggiungi una transizione di zoom
Usa gli aiuti di zoom per le rotte che si aprono da una scheda, un elemento della griglia o una anteprima dei media.
import { beginZoomTransition, finishZoomTransition } from '@capgo/capacitor-native-navigation';
const card = document.querySelector('[data-message-card]');
if (card) {
const transition = await beginZoomTransition(card, { cornerRadius: 18 });
router.push('/message/42');
await router.ready?.();
await NativeNavigation.setNavbar({
title: 'Message',
backButton: { visible: true, title: 'Inbox' },
});
await finishZoomTransition(undefined, {
id: transition.id,
cornerRadius: 18,
});
}
Riempi il contenuto con gli insetti nativi
Quando contentInsetMode è css, il plugin scrive le variabili CSS per le barre native:
.page {
padding-top: var(--cap-native-navigation-top);
padding-bottom: var(--cap-native-navigation-bottom);
}
Scegliere gli icona
Gli icona sono dei descriptor nativi, non dei nodi React o Vue. Utilizza SVG quando non vuoi caricare gli asset nativi:
const icon = {
svg: '<svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5"/></svg>',
template: true,
ios: { sfSymbol: 'house.fill' },
android: { resource: 'ic_menu_view' },
};
SVG inline supporta path, line, polyline, polygon, circlee, e rect, che copre set di icone comuni come Lucide e Feather.
Combina con @capgo/capacitor-transizioni
Usa la navigazione nativa per il navbar nativo, tabbar, insetti di area sicura e eventi di intento nativo. @capgo/capacitor-transitions per la pila di pagine del WebView sottostante al chrome nativo.
npm install @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npx cap sync
Inizializza entrambi i pacchetti una volta sola:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
import '@capgo/capacitor-transitions';
import { initTransitions, setupRouterOutlet, setDirection } from '@capgo/capacitor-transitions/react';
initTransitions({ platform: 'auto' });
const outlet = document.querySelector('cap-router-outlet');
if (outlet) {
setupRouterOutlet(outlet, { platform: 'auto', swipeGesture: 'auto' });
}
await NativeNavigation.configure({
contentInsetMode: 'css',
});
Tieni l'uscita di transizione focalizzata sulle pagine, non duplica le barre web:
<cap-router-outlet platform="auto" swipe-gesture="auto">
<cap-page>
<cap-content slot="content" fullscreen>
<main class="page">Inbox content</main>
</cap-content>
</cap-page>
</cap-router-outlet>
Guida entrambi i pacchetti dalle stesse azioni del router:
async function openMessage(id: string) {
setDirection('forward');
await router.push(`/messages/${id}`);
await NativeNavigation.setNavbar({
title: 'Message',
backButton: { visible: true, title: 'Inbox' },
});
}
await NativeNavigation.addListener('navbarBack', () => {
setDirection('back');
router.back();
});
await NativeNavigation.addListener('tabSelect', ({ id }) => {
setDirection('root');
router.push(`/${id}`);
});
Scegli un layer di animazione per ogni cambio di route. Lascia @capgo/capacitor-transitions animare le spinte di pagina normali, e usa gli aiuti di zoom della navigazione nativa solo per le rotte condivise o di zoom.
Riferimento Completo
- GitHub: https://github.com/Cap-go/capacitor-navigazione-nativa/
- Documentazione: /docs/plugins/navigazione-nativa/
Continua con l'uso di @capgo/capacitor-navigazione-nativa
Se stai utilizzando Utilizza @capgo/capacitor-navigazione-nativa per pianificare il comportamento dei media e dell'interfaccia nativa, collega @capgo/capacitor-navigazione-nativa per i dettagli di implementazione in @capgo/capacitor-navigazione-nativa Getting Started per i dettagli di implementazione in Avvio Utilizza @capgo/capacitor-attività-in-vivo per la capacità nativa in Utilizza @capgo/capacitor-attività-in-vivo @capgo/capacitor-attività in tempo reale per i dettagli di implementazione in @capgo/capacitor-live-attività Utilizzando @capgo/capacitor-lettore di video per la capacità nativa in Utilizzando @capgo/capacitor-lettore di video.