Navigation native

En utilisant @capgo/capacitor-navigation-native

@capgo/capacitor-native-navigation affiche une navigation native en haut, un onglet inférieur et des coques de transition de route sur une seule écran Capacitor WebView. Votre framework web possède toujours les routes et le contenu, tandis que le natif possède la fenêtre de l'application.

Installez et synchronisez

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

Configurez la frame native

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

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

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

Connectez 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

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

Utilisez les helpers 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édias.

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

Ajoutez du contenu avec des insets natifs

Lorsque contentInsetMode is cssest, le plugin écrit les 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 les actifs 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' },
};

L'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 la Navigation Native pour la barre de navigation native, la barre de tab, les insets de zone sécurisée et les événements d'intention native. Utilisez @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, 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>

Conduisez les deux packages à partir des mêmes actions de routeur :

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 une couche d'animation par changement de route. Laissez @capgo/capacitor-transitions animer les poussées de page normales, et utilisez les aides 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-native-navigation/
• Documentation : /docs/plugins/native-navigation/

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

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