Navigasi Native

Menggunakan @capgo/capacitor-native-navigation

@capgo/capacitor-native-navigation Menampilkan navigasi asli atas, tab bawah chrome, dan kulit transisi rute di atas layar Capacitor tunggal. Framework web Anda masih mengontrol rute dan konten, sementara asli mengontrol kerangka aplikasi.

Install dan sinkronkan

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

Konfigurasi kerangka asli

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

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

Tampilkan navbar asli

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

Tampilkan tabbar asli

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

Hubungkan acara asli ke router Anda

Bar-bar asli mengeluarkan niat. Router Anda masih melakukan perubahan rute:

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

Animasikan perubahan rute

Gunakan transaksi transisi di sekitar perubahan rute web normal Anda:

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

Tambahkan transisi zoom

Pilih zoom helper untuk rute yang dibuka dari kartu, item grid, atau pratinjau media.

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

Padankan konten dengan insets native

Ketika contentInsetMode adalah css, plugin menulis variabel CSS untuk bar-bar native:

.page {
  padding-top: var(--cap-native-navigation-top);
  padding-bottom: var(--cap-native-navigation-bottom);
}

Pilihan ikon

Ikon adalah deskriptor native, bukan node React atau Vue. Gunakan SVG ketika Anda tidak ingin menggabungkan aset native:

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 inline mendukung path, line, polyline, polygon, circle, dan rect, yang mencakup set ikon umum seperti Lucide dan Feather.

Combinasikan dengan @capgo/capacitor-transisi

Pilih Navigasi Asli untuk navbar asli, tabbar, insets area aman, dan event intent asli. Gunakan @capgo/capacitor-transitions untuk tumpukan halaman WebView di bawah chrome asli tersebut.

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

Initiliasikan kedua paket tersebut sekali:

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

Tetapkan outlet transisi fokus pada halaman, bukan duplikat bar web:

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

Driver kedua paket tersebut dari aksi router yang sama:

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

Pilih satu layer animasi per perubahan rute. Biarkan @capgo/capacitor-transitions animasi push halaman normal, dan gunakan bantuan zoom Navigasi Asli hanya untuk rute elemen bersama atau zoom.

Referensi Lengkap

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

Teruskan dari Menggunakan @capgo/capacitor-native-navigation

Jika Anda menggunakan Menggunakan @capgo/capacitor-native-navigation untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan @capgo/capacitor-native-navigation untuk detail implementasi di @capgo/capacitor-native-navigation, Getting Started untuk detail implementasi di Getting Started, Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, dan Menggunakan @capgo/capacitor-video-player untuk kemampuan asli dengan menggunakan @capgo/capacitor-video-player.