Navigasi Native

Menggunakan @capgo/capacitor-native-navigation

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

Instal dan sinkronisasi

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

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

Render sebuah 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 native ke router Anda

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

Mengubah 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

Gunakan bantuan zoom 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 asli, bukan node React atau Vue. Gunakan SVG ketika Anda tidak ingin mengemas 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.

Combination dengan @capgo/capacitor-transisi

Pilih Native Navigation untuk navbar native, tabbar, insets area aman, dan event intent native. Gunakan @capgo/capacitor-transitions untuk stack halaman WebView di bawah chrome native tersebut.

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

Mulai kedua paket 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>

Gerakkan kedua paket 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 normal push halaman, dan gunakan bantuan Native Navigation hanya untuk rute elemen bersama atau rute zoom.

Panduan Lengkap

• GitHub: https://github.com/Cap-go/capacitor-native-navigation/
• Dokumen: /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, Panduan Pemula For detail implementasi di Getting Started, Menggunakan @capgo/capacitor-live-aktivitas For kemampuan asli di Menggunakan @capgo/capacitor-live-aktivitas, @capgo/capacitor-live-aktivitas For detail implementasi di @capgo/capacitor-live-aktivitas, dan Menggunakan @capgo/capacitor-video-player For kemampuan asli di Menggunakan @capgo/capacitor-video-player.