Navigation native

En utilisant @capgo/capacitor-native-navigation

@capgo/capacitor-native-navigation affiche une navigation native en haut de l'écran, un chrome de vignette en bas et des coquilles de transition de route sur une seule écran Capacitor WebView. Votre framework web possède toujours les routes et le contenu, tandis que la navigation native possède le cadre de l'application.

Installer et synchroniser

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

Configurer le cadre natif

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

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

Rendre un menu de navigation natif

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

Rendre un menu de 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 la mise à jour de la 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

Utiliser une transaction de transition autour de la mise à jour normale de votre route web :

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

Ajouter une transition de zoom

Utiliser les assistants de zoom pour les routes qui s'ouvrent à partir d'un carte, d'un élément de grille ou d'une prévisualisation de média :

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

Ajouter du contenu avec des 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 rect, qui couvre les ensembles d'icônes courants comme Lucide et Feather.

Combinez avec @capgo/capacitor-transitions

Utilisez Navigation Native pour la barre de navigation native, la barre d'onglets, les insets de zone de sécurité et les événements d'intention native. Utilisez @capgo/capacitor-transitions pour la pile de pages WebView sous la barre de navigation native.

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

Initialisez les deux packages une seule 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',
});

Gardez la sortie de transition centrée sur les pages, pas les barres web dupliquées :

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

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

Choisissez un niveau d'animation par changement de route. Laissez @capgo/capacitor-transitions animate les poussées de page normales, et utilisez les assistants de zoom de Native Navigation uniquement pour les routes de partage d'éléments ou de zoom.

Référence complète

• GitHub: https://github.com/Cap-go/capacitor-navigation-native/
• Documentation : /docs/plugins/navigation-native/

Continuez à partir de l'utilisation de @capgo/capacitor-navigation-native

Si vous utilisez L'utilisation de @capgo/capacitor-navigation-native pour planifier le comportement de médias et d'interface natifs, connectez-le avec @capgo/capacitor-navigation-native pour les détails d'implémentation dans @capgo/capacitor-navigation-native Démarrage pour les détails d'implémentation dans Getting Started, Utilisation de @capgo/capacitor-live-activités pour la capacité native dans Utilisation de @capgo/capacitor-live-activités, @capgo/capacitor-live-activités pour les détails d'implémentation dans @capgo/capacitor-live-activités, et Utilisation de @capgo/capacitor-player vidéo pour la capacité native dans Utilisation de @capgo/capacitor-player vidéo.