Navigation native

En utilisant @capgo/capacitor-native-navigation

@capgo/capacitor-native-navigation affiche une navigation supérieure native, un chrome de tab 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 la native possède la structure de l'application.

Installer et synchroniser

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

Configurez la fenêtre 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 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',
});

Ajoutez une transition de zoom

Utilisez 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é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 encadrés natifs

Lorsque contentInsetMode __CAPGO_KEEP_0__ css, l'extension é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 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' },
};

L'inline SVG prend en charge path, line, polyline, polygon, circle, et rect, qui couvre les ensembles d'icônes courants tels que 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 de sécurité et les événements d'intention native. Utilisez @capgo/capacitor-transitions pour la pile de pages WebView située sous ce chrome natif.

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

Conservez 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 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 Navigation Native 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/navigation-native/

Continuez à utiliser @capgo/capacitor-navigation-native

Si vous utilisez Utilisez @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 Prise en main pour les détails d'implémentation dans Prise en main, Utilisation de @capgo/capacitor-activités-en-vive pour la capacité native dans Utilisation de @capgo/capacitor-activités-en-vive, @capgo/capacitor-activités-en-vive pour les détails d'implémentation dans @capgo/capacitor-activités-en-vive, et Utilisation de @capgo/capacitor-joueur-de-videos pour la capacité native dans Utilisation de @capgo/capacitor-joueur-de-videos.