Native Navigation Capacitor-Plugin

Verwendet @capgo/capacitor-native-navigation

@capgo/capacitor-native-navigation Rendert eine native Ober- und Unter-Navigation, Tab-UI und Routen-Übergänge über eine einzelne Vollbild-Capacitor-WebView. Ihre Web-Framework besitzt die Routen und Inhalte, während native die App-Frame besitzt.

Installieren und synchronisieren

npm install @capgo/capacitor-native-navigation
npx cap sync

Konfigurieren Sie das native Frame

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  colors: {
    tint: '#0f172a',
    inactiveTint: '#64748b',
  },
});

Rendern Sie eine native Navbar

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>',
      },
    },
  ],
});

Fügen Sie mehrere Ebenen von Segmenten unter der Navbar hinzu

Übergeben segments zu setNavbar um eine Stackschicht von nativen Segmenten unter der Leiste zu erstellen, z. B. ein Scope-Switcher oben und Abschnittstabs darunter. Die Zeilen werden von oben nach unten gezeichnet und jede hinzufügt 44pt (iOS) bzw. 48dp (Android) zur Leiste und zu den berichteten Insets. iOS verwendet UISegmentedControl und Glaspillen; Android verwendet Material-segmentierte Schaltflächen und Filterchips.

iOS	Android

const sections = {
  account: ['General', 'Notifications', 'Password', 'Two-factor'],
  organization: ['General', 'Members', 'Plans', 'Usage', 'Credits', 'Billing', 'Security', 'Webhooks'],
};
const selection = { scope: 'account', section: 'general' };

const renderNavbar = () =>
  NativeNavigation.setNavbar({
    title: 'Settings',
    segments: [
      {
        id: 'scope',
        selectedId: selection.scope,
        items: [
          { id: 'account', title: 'Account' },
          { id: 'organization', title: 'Organization' },
        ],
      },
      {
        id: 'section',
        style: 'scroll', // scrolling chips; `auto` uses `segmented` for up to 4 items
        selectedId: selection.section,
        items: sections[selection.scope].map((title) => ({ id: title.toLowerCase(), title })),
      },
    ],
  });

await NativeNavigation.addListener('navbarSegmentSelect', async ({ groupId, id }) => {
  if (groupId === 'scope') {
    selection.scope = id;
    selection.section = 'general'; // the second level depends on the first one
  } else {
    selection.section = id;
  }
  await renderNavbar();
});

await renderNavbar();

Die Auswahl bewegt sich ursprünglich, wenn der Benutzer tippt, aber jede setNavbar wirfert Anwendung selectedId Wiederholen Sie die ausgewählten IDs in Ihrem Zustand und übergeben Sie sie auf jeden späteren setNavbar rufen; um eine Auswahl abzulehnen, senden Sie die vorherige selectedIdItems auch akzeptieren icon, accessibilityLabelund enabled. Entfernen segments: [] Entfernen Sie die Zeilen. Verfügbar seit 8.13.0.

Verfügbar seit 8.13.0.

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>',
      },
    },
  ],
});

Ein nativer Tabbar rendern

Native Bars senden eine Absicht aus. 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 eine Übergangstransaktion um Ihre normale Web-Routenaktualisierung einzuschließen:

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-Übergangsanimation 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,
  });
}

Inhalte des Pads mit nativen Einstellungen auffüllen

When contentInsetMode is css, der 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

Ikone sind native Beschreibungen, nicht React- oder Vue-Elemente. Verwenden Sie SVG, wenn Sie native Assets nicht bundeln 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ützt path, line, polyline, polygon, circle, und rect, die gängigen Icon-Sets wie Lucide und Feather abdeckt.

Combine mit @capgo/capacitor-Übergängen

Verwenden Sie Native Navigation für die 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 duplizierte Web-Balken:

<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>

Beide Pakete aus der gleichen Router-Aktionen ansteuern:

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}`);
});

Picken Sie eine Animationsschicht pro Routenänderung. Lassen Sie @capgo/capacitor-transitions normalen Seitenwechsel animieren und verwenden Sie die Zoom-Hilfen 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 von @capgo/capacitor-native-navigation

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Verwendung von @capgo/capacitor-native-Navigation um native Medien und Schnittstellenverhalten zu planen, mit ihm zu verbinden Using @capgo/capacitor-native-navigation für die Implementierungsdetails in @capgo/capacitor-native-navigation, Getting Started für die Implementierungsdetails in Einstieg, 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 Verwendung von @capgo/capacitor-video-player für die native Fähigkeit in Verwendung von @capgo/capacitor-video-player.