전환

Using @capgo/capacitor-transitions

@capgo/capacitor-transitions Capacitor 앱에 Ionic-style 경로 전환을 추가합니다. Ionic UI를 채택하지 않고도 Capacitor 앱에 Ionic-style 경로 전환을 추가할 수 있습니다. 이 기능은 웹层에서 작동하고 기존 라우터를 유지하며, iOS 에지 스와이프 백 전환을 자동으로 활성화할 수 있습니다. 이 기능은 native Capacitor iOS에서만 작동합니다.

설치

npm install @capgo/capacitor-transitions

이 패키지는 native 플러그인 code를 추가하지 않기 때문에 native 동기화 단계가 없습니다.

요소 등록

import '@capgo/capacitor-transitions';

페이지 wrapping

<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 서브 경로에는 사용자 정의 요소에 대한 JSX 타이핑이 포함되어 있습니다. TypeScript가 여전히 cap-router-outlet 이 존재하지 않습니다. JSX.IntrinsicElements,를 보고 있다면 이 파일을 추가하세요:

// src/capgo-transitions.d.ts
import '@capgo/capacitor-transitions/react';

Vite, Create React App, 및 대부분의 webpack React 앱의 경우 src/ 파일을 유지하는 것이 충분합니다. Next.js 또는 사용자 정의 TypeScript 설정의 경우 tsconfig.json:

{
  "include": ["src", "src/capgo-transitions.d.ts"]
}

를 포함하도록 보장하세요.

터치 뒤로 swipe-gesture="auto" to enable the gesture only when Capacitor reports a native iOS runtime:

<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>

터치 뒤로 기능을 사용하려면 __CAPGO_KEEP_0__이 네이티브 iOS 런타임을 보고하는 경우에만 사용하세요:

const outlet = document.querySelector('cap-router-outlet');

outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);
outlet?.setSwipeGesture('auto');

또한 JavaScript에서 강제로 사용할 수 있습니다: data-swipe-gesture-ignore 터치 뒤로 기능은 전환 중에 손가락을 따라가고 사용자가 손가락을 놓으면 완료되거나 취소됩니다.

버튼, 슬라이더 또는 드로어에 추가하여 edge 터치 기능을 시작하지 않도록 하세요.

설치 @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 애니메이션 페이지 본문과 네이티브 네비게이션 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: https://github.com/Cap-go/capacitor-transitions/
• 문서: /docs/plugins/transitions/

capgo와 capacitor을 사용하여 전환을 계속하세요.

__CAPGO_KEEP_0__을 사용 중이시면 capgo와 capacitor을 사용하여 전환을 계속하세요. __CAPGO_KEEP_0__을 사용하여 capgo을 capgo와 capacitor으로 연결하세요. capgo와 capacitor의 구현 세부 정보를 capgo와 capacitor에서 확인하세요. Getting Started Getting Started의 구현 세부 정보를 확인하세요. capgo와 capacitor을 사용하여 capgo와 capacitor을 사용하여 capgo와 capacitor의 네이티브 기능을 사용하세요. capgo와 capacitor capgo와 capacitor의 구현 세부 정보를 capgo와 capacitor에서 확인하세요. Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.