Guide
Wie man Native Navigation in Capacitor verwendet
Testen auf Gerät
Herunterladen Sie die Capgo App, dann scannen Sie die QR-code.
Mit @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.
Konfigurieren Sie den native Rahmen
npm install @capgo/capacitor-native-navigation
npx cap sync
Rendern Sie eine native Navbar
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
colors: {
tint: '#0f172a',
inactiveTint: '#64748b',
},
});
Rendern Sie eine native Tabbar
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>',
},
},
],
});
Verbinden Sie native Ereignisse mit Ihrem Router
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>',
},
},
],
});
Verbinde native Ereignisse mit deinem Router
Nativbalken senden eine Absicht. Ihr Router führt den Routenwechsel immer noch durch:
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}`);
});
Routenänderungen animieren
Verwenden Sie einen Übergangstransaktion um Ihre normale Web-Routenaktualisierung zu umgeben:
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',
});
Fügen Sie eine Zoom-Übergang hinzu
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,
});
}
Padden Sie Inhalte mit nativen Einstellungen
Wenn contentInsetMode is css, das Plugin schreibt CSS-Variablen für die native Balken:
.page {
padding-top: var(--cap-native-navigation-top);
padding-bottom: var(--cap-native-navigation-bottom);
}
Iconauswahl
Icons sind native Beschreibungen, nicht React- oder Vue-Elemente. Verwenden Sie SVG, wenn Sie native Assets nicht in den Bundle einbeziehen möchten:
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' },
};
Inline SVG Unterstützung path, line, polyline, polygon, circleund rect, die gängigen Icon-Sets wie Lucide und Feather abdeckt.
Combine mit @capgo/capacitor-Übergänge
Verwenden Sie Native Navigation für das native Navbar, Tabbar, safe-Area-Einrückungen und native Intent-Ereignisse. Verwenden Sie @capgo/capacitor-transitions für die WebView-Seiten-Stack unterhalb der native Chrome.
npm install @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npx cap sync
Initialisieren Sie beide Pakete einmal:
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',
});
Halten Sie den Übergangsausgang auf den Seiten, nicht auf Duplikate von Web-Bars:
<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>
Steueren Sie beide Pakete von denselben Router-Aktionen:
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}`);
});
Wählen Sie eine Animationsschicht pro Routenänderung. Lassen Sie @capgo/capacitor-transitions normalen Seiten-Drücken animieren, und verwenden Sie die Zoom-Helfer von Native Navigation nur für gemeinsame-Element- oder Zoom-Routen.
Vollständige Referenz
- GitHub: https://github.com/Cap-go/capacitor-native-Navigation/
- Dokumentation: /docs/plugins/native-navigation/
Fortsetzen mit @capgo/capacitor-native-navigation
Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation verwenden Verwenden Sie @capgo/capacitor-native-navigation um native Medien und Schnittstellen zu planen und es mit @capgo/capacitor-native-Navigation für die Implementierungsdetails in @capgo/capacitor-native-Navigation, Anleitung für die Implementierungsdetails in Anleitung für die Implementierungsdetails im Abschnitt "Getting Started" Verwendung von @capgo/capacitor-live-Aktivitäten für die native Fähigkeit in Verwendung von @capgo/capacitor-live-Aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten, und Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player.