Navigasi Native

Menggunakan @capgo/capacitor-native-navigation

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

Instal dan sinkronkan

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

Konfigurasi kerangka native

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

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

Mengrender navbar native

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

Mengrender tabbar native

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

Menghubungkan event native ke router Anda

Bar-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 rute dengan animasi

Menggunakan transaksi transisi di sekitar perbarui rute web normal:

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

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

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

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

Referensi Lengkap

• GitHub: https://github.com/Cap-go/capacitor-navigasi-asli/
• Dokumen: /docs/plugins/navigasi-asli/

Teruskan dari Menggunakan @capgo/capacitor-navigasi-asli

Jika Anda menggunakan Menggunakan @capgo/capacitor-native-navigation untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan @capgo/capacitor-native-navigation untuk detail implementasi di @capgo/capacitor-native-navigation, Mengawali untuk detail implementasi di Mengawali, 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 di Menggunakan @capgo/capacitor-player-video.