Navigation native

En utilisant @capgo/capacitor-native-navigation

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

Installer et synchroniser

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

Ajoutez du contenu avec des insets natifs

Lorsque contentInsetMode est cssÉ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 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'SVG en ligne prend en charge path, line, polyline, polygon, circleet 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 de sécurité et les événements d'intention native. Utilisez @capgo/capacitor-transitions pour la pile de pages WebView sous la chrome 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',
});

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>

Contrôlez 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 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 à utiliser @capgo/capacitor-native-navigation

Si vous utilisez Utilisez @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-native-navigation, Début de l'implémentation pour les détails d'implémentation dans Début de l'implémentation, En utilisant @capgo/capacitor-activités-en-vivre pour la capacité native dans En utilisant @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 En utilisant @capgo/capacitor-joueur-de-videos pour la capacité native dans En utilisant @capgo/capacitor-joueur-de-videos.