Lompat ke konten utama
Logo Capgo
Kembali ke plugin
@capgo/native-navigation
Tutorial
oleh github.com/Cap-go

Navigasi Native

Tampilkan navigasi native, tabbar, dan shell transisi di atas WebView layar penuh Capacitor

Unduhan/minggu

tidak ada

GitHub Bintang

tidak ada

Petunjuk

Tutorial Pemetaan Nativ

Menggunakan @capgo/native-navigation

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

Pasang dan sinkronisasi

bun add @capgo/native-navigation
bunx cap sync

Konfigurasi kerangka natif

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

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

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

Mengrender tabbar natif

await NativeNavigation.setTabbar({
  selectedId: 'inbox',
  labels: true,
  icons: true,
  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 event natif 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}`);
});

Ubah perubahan rute dengan animasi

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 konten dengan inset native

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

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

Pilihan ikon

Ikon adalah deskriptor asli, bukan React atau Vue node. Gunakan SVG ketika Anda tidak ingin mengemas asset asli: 

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.

Referensi Lengkap