ガイド
CapacitorでNative Navigationを使用する方法
使用する@capgo/capacitor-native-navigation
@capgo/capacitor-native-navigation ネイティブのトップナビゲーション、ボトムタブのシェル、ルートのトランジションシェルを1つのフルスクリーンCapacitor WebView上にレンダリングします。Webフレームワークはルートとコンテンツを管理し、ネイティブはアプリケーションフレームを管理します。
インストールと同期
npm install @capgo/capacitor-native-navigation
npx cap sync
ネイティブフレームの設定
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
colors: {
tint: '#0f172a',
inactiveTint: '#64748b',
},
});
ネイティブのナビゲーションバーをレンダリング
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>',
},
},
],
});
ネイティブのタブバーをレンダリング
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>',
},
},
],
});
ネイティブイベントをルーターに接続
ネイティブバーは意図を発生させます。ルーターはルートの変更を実行します:
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}`);
});
ルート変更をアニメーション化
正常な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',
});
ズームトランジションを追加
カード、グリッドアイテム、またはメディアプレビューから開くルートの場合、ズームヘルパーを使用してください。
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,
});
}
ネイティブのインセットでコンテンツを埋めます
場合 contentInsetMode は css, プラグインはネイティブバーのCSS変数を書き込んでいます:
.page {
padding-top: var(--cap-native-navigation-top);
padding-bottom: var(--cap-native-navigation-bottom);
}
アイコンの選択肢
アイコンはReactまたはVueノードではありません。ネイティブアセットをバンドルしない場合はSVGを使用してください:
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は path, line, polyline, polygon, circle、 rect、LucideやFeatherなどの一般的なアイコンセットをカバーします。
@capgo/capacitor-トランジションを組み合わせてください。
ネイティブナビゲーションを使用してネイティブのナビゲーションバー、タブバー、セーフエリアのインセット、ネイティブのイベントを使用します。 その下のネイティブのクロームを使用するウェブビューのページスタック。 @capgo/capacitor-transitions 両方のパッケージを一度に初期化します。
npm install @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npx cap sync
ページのトランジションアウトレットを、ウェブバーの複製を避けるためにフォーカスします。
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',
});
同じルーターアクションから両方のパッケージをドライブします。
<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>
パッケージを両方から同じルーター アクションでドライブする:
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}`);
});
フルリファレンス @capgo/capacitor-transitions __CAPGO_KEEP_0__:
https://__CAPGO_KEEP_0__.com/Cap-go/__CAPGO_KEEP_1__-native-navigation/
- GitHub https://github.com/Cap-go/capacitor-native-navigation/
- ドキュメント: /docs/plugins/native-navigation/
使用中の@capgo/capacitor-native-navigationから続けてください。
Capacitor Native Navigationを使用している場合 Using @capgo/capacitor-native-navigation Capacitor Native Navigationを使用して、ネイティブメディアとインターフェイスの動作を計画します。 @capgo/capacitor-native-navigation @capgo/capacitor-nativeナビゲーション実装詳細 スタートガイド Capacitor Native Navigationを使用して、ネイティブメディアとインターフェイスの動作を計画します。 @capgo/capacitor-ライブアクティビティ native capabilityの使用にあたっては、@capgo/capacitor-live-activitiesを使用します。 @capgo/capacitor-ライブアクティビティ @capgo/capacitor-ライブアクティビティの実装詳細について @capgo/capacitor-ビデオプレーヤー Capacitor-native-navigationsのネイティブ機能のために@capgo/capacitor-video-playerを使用します。