Using @capgo/capacitor-transitions
@capgo/capacitor-transitions adds Ionic-style route transitions to Capacitor apps without adopting Ionic UI. It runs in the web layer, keeps your existing router, and can auto-enable an iOS edge swipe-back gesture only inside native Capacitor iOS.
설치
npm install @capgo/capacitor-transitions
code native 플러그인을 추가하지 않기 때문에 native sync 단계가 없습니다.
요소 등록
import '@capgo/capacitor-transitions';
페이지 Wrap
<cap-router-outlet platform="auto" swipe-gesture="auto">
<cap-page>
<cap-header slot="header">
<h1>Inbox</h1>
</cap-header>
<cap-content slot="content">
<button>Open message</button>
</cap-content>
<cap-footer slot="footer">
<nav>Tabs</nav>
</cap-footer>
</cap-page>
</cap-router-outlet>
라우터와 연결
전환 방향을 설정하기 전에 일반 라우트 업데이트하기:
import { setDirection } from '@capgo/capacitor-transitions/react';
setDirection('forward');
router.push('/message/42');
setDirection('back');
router.back();
React 예시
import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';
import '@capgo/capacitor-transitions';
initTransitions({ platform: 'auto' });
export function AppShell() {
const outletRef = useRef<HTMLElement>(null);
useEffect(() => {
if (!outletRef.current) return;
setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
}, []);
return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}
export function InboxPage() {
const navigate = useNavigate();
const pageRef = useRef<HTMLElement>(null);
useEffect(() => {
if (!pageRef.current) return;
return setupPage(pageRef.current);
}, []);
return (
<cap-page ref={pageRef}>
<cap-header slot="header">
<h1>Inbox</h1>
</cap-header>
<cap-content slot="content">
<button
onClick={() => {
setDirection('forward');
navigate('/message/42');
}}
>
Open message
</button>
</cap-content>
</cap-page>
);
}
React subpath는 JSX 타이핑을 포함한 커스텀 요소에 대한 JSX 타이핑을 제공합니다. TypeScript가 여전히 __CAPGO_KEEP_2__가 존재하지 않는다고 보고하는 경우 cap-router-outlet __CAPGO_KEEP_3__가 존재하지 않는다고 보고하는 경우 JSX.IntrinsicElementsVite, Create React App, 및 대부분의 webpack React 앱에서, 그 파일을
// src/capgo-transitions.d.ts
import '@capgo/capacitor-transitions/react';
__CAPGO_KEEP_4__ 아래에 유지하세요. src/ 다음.js 또는 사용자 지정 TypeScript 설정에서 충분히 포함되어야 합니다. tsconfig.json:
{
"include": ["src", "src/capgo-transitions.d.ts"]
}
스와이프 뒤로 활성화
사용하여 swipe-gesture="auto" Capacitor이 네이티브 iOS 런타임을 보고할 때 이 제스처를 활성화할 때만:
<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>
또한 자바스크립트에서 강제로 사용할 수 있습니다.
const outlet = document.querySelector('cap-router-outlet');
outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);
outlet?.setSwipeGesture('auto');
이 제스처는 전환 중에 손가락을 따라가고, 사용자가 손가락을 놓으면 완료되거나 취소됩니다. data-swipe-gesture-ignore 버튼, 슬라이더 또는 드로어에 추가하여 제스처를 시작하지 않도록 하십시오.
네이티브 네비게이션과 함께 사용
설치 @capgo/native-navigation 네이티브层이 네비게이션 바 또는 탭 바를 소유할 때 사용
npm install @capgo/native-navigation
npx cap sync
네이티브 크롬을 구성한 후 WebView 페이지에 전환을 집중시키십시오:
import { NativeNavigation } from '@capgo/native-navigation';
import { setDirection } from '@capgo/capacitor-transitions/react';
import { router } from './router';
await NativeNavigation.configure({
contentInsetMode: 'css',
});
await NativeNavigation.setNavbar({
title: 'Inbox',
backButton: { visible: false },
});
await NativeNavigation.addListener('navbarBack', () => {
setDirection('back');
router.back();
});
async function openMessage(id: string) {
setDirection('forward');
router.push(`/message/${id}`);
await NativeNavigation.setNavbar({
title: 'Message',
backButton: { visible: true, title: 'Inbox' },
});
}
사용하여 cap-content animated 페이지의 바디와 네이티브 네비게이션 CSS 변수를 위한 insets:
<cap-router-outlet platform="auto" swipe-gesture="auto">
<cap-page>
<cap-content slot="content" fullscreen>
<main class="native-page">Inbox content</main>
</cap-content>
</cap-page>
</cap-router-outlet>
.native-page {
padding-top: var(--cap-native-navigation-top);
padding-bottom: var(--cap-native-navigation-bottom);
}
네이티브 네비게이션 바를 움직이는 웹 헤더로 복제하지 마세요. @capgo/native-navigation 바를 네이티브로 유지한다. @capgo/capacitor-transitions 그것 아래의 페이지 콘텐츠를 애니메이트한다.
전체 참조
- GitHub: github.com/Cap-go/capacitor-transitions
- 문서: /ko/docs/plugins/transitions/
Using @capgo/capacitor-transitions에서 계속하세요.
Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions Using @capgo/capacitor-transitions 네이티브 미디어와 인터페이스 동작을 계획하는 경우, 그것을 @capgo/capacitor-transition @capgo/capacitor 전환에 대한 구현 세부 사항 시작하기 Capacitor-__CAPGO_KEEP_1__-transition @capgo/capacitor-실시간 활동 native 기능을 위한 @capgo/capacitor-live-활동 @capgo/capacitor-라이브-활동 @capgo/capacitor-라이브-액티비티에 대한 구현 세부 사항 @capgo/capacitor-video-player Capacitor 전환 기능을 사용하는 @capgo/capacitor 비디오 플레이어를 위해.