Guide
Capacitor 테스트
@capgo/capacitor-네이티브-네비게이션을 사용하여
@capgo/capacitor-native-navigation 네이티브 탑 네비게이션, 하단 탭 크롬, 라우트 전환 셸을 단일 풀 스크린 Capacitor WebView 위에 렌더링합니다. 웹 프레임워크는 여전히 경로와 콘텐츠를 소유하고 있으면서 네이티브는 앱 프레임을 소유합니다.
설치 및 동기화
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>',
},
},
],
});
네이티브 이벤트를 라우터와 연결합니다
자연스러운 바는 intent를 내보냅니다. 라우터는 여전히 경로 변경을 수행합니다:
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}`);
});
경로 변경을 애니메이션화
정상적인 웹 경로 업데이트 주변에 전환 거래를 사용하세요:
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',
});
줌 전환을 추가하세요
카드, 그리드 아이템, 미디어 미리보기에서 열리는 경로에 대해 zoom 도우미를 사용하세요.
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 변수를 native 바에 쓰기 위해 쓰세요:
.page {
padding-top: var(--cap-native-navigation-top);
padding-bottom: var(--cap-native-navigation-bottom);
}
아이콘 선택
아이콘은 React 또는 Vue 노드가 아닌 native 디스크립터입니다. SVG를 사용하여 native 자산을 패키지하지 않으려면 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-전환을 combine합니다.
자연스러운 네비게이션 바, 탭 바, 안전 영역 인셋, 그리고 네이티브 인텐트 이벤트를 위해 Native Navigation을 사용하세요. WebView 페이지 스택은 Native Chrome 아래에서 사용하세요. @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}`);
});
Full Reference @capgo/capacitor-transitions __CAPGO_KEEP_0__:
__CAPGO_KEEP_1__:
- GitHub: https://github.com/Cap-go/capacitor-native-navigation/
- 문서: /docs/plugins/native-navigation/
Using @capgo/capacitor-native-navigation
Capacitor Native Navigation을 사용 중이라면 Using @capgo/capacitor-native-navigation native 미디어 및 인터페이스 동작을 계획하고 연결하세요 @capgo/capacitor-native-navigation과 연결하세요. @capgo/capacitor-native-navigation의 implementation detail을 참조하세요. Getting Started Getting Started의 implementation detail을 참조하세요. Using @capgo/capacitor-live-activities Using @capgo/capacitor-live-activities의 native capability을 참조하세요. @capgo/capacitor-live-활동 @capgo/capacitor-라이브-활동 Using @capgo/capacitor-비디오 플레이어 native 기능을 위한 @capgo/capacitor-video-player.