Guide
Comment utiliser la Navigation Native dans Capacitor
L'utilisation de @capgo/capacitor-native-navigation
@capgo/capacitor-native-navigation renders native top navigation, bottom tab chrome, and route transition shells over a single full-screen Capacitor WebView. Your web framework still owns routes and content, while native owns the app frame.
Installer et synchroniser
npm install @capgo/capacitor-native-navigation
npx cap sync
Configurer la fenêtre native
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
colors: {
tint: '#0f172a',
inactiveTint: '#64748b',
},
});
Afficher un menu de navigation native
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>',
},
},
],
});
Afficher un tabbar natif
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>',
},
},
],
});
Connecter les événements natifs à votre routeur
Les barres natives émettent une intention. Votre routeur effectue toujours le changement de route :
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}`);
});
Animer les changements de route
Utilisez une transaction de transition autour de votre mise à jour de route 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',
});
Ajoutez une transition de zoom
Use the zoom helpers for routes that open from a card, grid item, or media preview.
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,
});
}
Faites correspondre le contenu avec les insets natifs
Lorsque contentInsetMode est css, le plugin écrit des variables CSS pour les barres natives :
.page {
padding-top: var(--cap-native-navigation-top);
padding-bottom: var(--cap-native-navigation-bottom);
}
Choix d'icônes
Les icônes sont descripteurs natifs, pas des nœuds React ou Vue. Utilisez SVG lorsque vous ne voulez pas charger des assets natifs :
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 en ligne prend en charge path, line, polyline, polygon, circle, et rectcouvrant les ensembles d'icônes courants comme Lucide et Feather.
Combinez avec @capgo/capacitor-transitions
Utilisez la navigation native pour le navbar natif, la barre d'outils, les insets de zone de sécurité et les événements d'intent natif. @capgo/capacitor-transitions pour la pile de pages WebView sous-jacente à ce chrome natif.
npm install @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npx cap sync
Initialisez les deux packages une fois :
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',
});
Conservez la sortie de transition sur les pages, et non dupliquer les barres 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>
Dirigez les deux packages à partir des mêmes actions de routage :
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}`);
});
Sélectionnez une couche d'animation par changement de route. Laissez @capgo/capacitor-transitions animer les poussées de page normales, et utiliser les assistants de zoom de Native Navigation uniquement pour les routes partagées ou de zoom.
Référence complète
- GitHub : https://github.com/Cap-go/capacitor-navigation-native
- Documentation : /docs/plugins/native-navigation/
Continuez à utiliser @capgo/capacitor-native-navigation
Si vous utilisez Utilisez @capgo/capacitor-native-navigation pour planifier le comportement des médias et de l'interface native, connectez-l’à @capgo/capacitor-native-navigation pour les détails d'implémentation dans @capgo/capacitor-native-navigation Getting Started pour les détails d'implémentation dans Getting Started Utilisez @capgo/capacitor-live-activities pour la capacité native dans Utilisez @capgo/capacitor-live-activities @capgo/capacitor-activités en direct pour les détails d'implémentation dans @capgo/capacitor-activités en direct, et En utilisant @capgo/capacitor-joueur de vidéo pour la capacité native dans En utilisant @capgo/capacitor-joueur de vidéo.