전환

@capgo/capacitor-transitions를 사용하여

@capgo/capacitor-transitions Capacitor 앱에 Ionic-style 경로 전환을 추가합니다. Ionic UI를 채택하지 않고도 Capacitor 앱에 Ionic-style 경로 전환을 추가할 수 있습니다. 이 플러그인은 웹层에서 작동하고 기존 라우터를 유지하며 iOS 에지 스와이프 백 전환을 자동으로 활성화할 수 있습니다. iOS 에지 스와이프 백 전환은 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>
  );
}

The React subpath는 JSX 타이핑을 포함하여 사용자 정의 요소에 대해 제공합니다. TypeScript가 여전히 "does not exist on"을 보고한다면 cap-router-outlet 이 파일을 추가하세요. JSX.IntrinsicElementsVite, Create React App, 및 대부분의 webpack React 앱의 경우, 그 파일을

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

하위 폴더에 두면 충분합니다. Next.js 또는 사용자 정의 TypeScript 설정의 경우, 그것이 포함되어 있는지 확인하세요. src/ __CAPGO_KEEP_0__이 네이티브 iOS 런타임을 보고하는 경우에만 제스처를 사용하도록 허용합니다. tsconfig.json:

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

__CAPGO_KEEP_0__이 네이티브 iOS 런타임을 보고하는 경우에만 제스처를 사용하도록 허용합니다.

__CAPGO_KEEP_0__이 네이티브 iOS 런타임을 보고하는 경우에만 제스처를 사용하도록 허용합니다. swipe-gesture="auto" Capacitor이 네이티브 iOS 런타임을 보고하는 경우에만 제스처를 사용하도록 허용합니다.

<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');

__CAPGO_KEEP_0__이 네이티브 iOS 런타임을 보고하는 경우에만 제스처를 사용하도록 허용합니다. data-swipe-gesture-ignore __CAPGO_KEEP_0__이 네이티브 iOS 런타임을 보고하는 경우에만 제스처를 사용하도록 허용합니다. 또한 JavaScript에서 강제로 사용할 수 있습니다: "The gesture follows the finger during the transition, then completes or cancels when the user releases. Add "on buttons, sliders, or drawers that should not start the edge gesture."

자연스러운 네비게이션 사용

설치 @capgo/native-navigation 자연 네이티브层이 navbar 또는 tabbar을 소유할 때:

npm install @capgo/native-navigation
npx cap sync

자연 네이티브 크롬을 구성하고 WebView 페이지에 전환을 유지하는 CSS 변수로 초점을 맞추세요:

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 page body와 자연스러운 네비게이션 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);
}

자연 네이티브 navbar을 중복하지 마세요. @capgo/native-navigation 바를 자연스럽게 유지하세요. @capgo/capacitor-transitions 그 아래쪽에 페이지 콘텐츠를 애니메이션하세요.

전체 참조

• GitHub https://github.com/Cap-go/capacitor-transitions/
• 문서: /docs/plugins/transitions/

capgo/capacitor-transitions를 사용하여 계속 진행하세요.

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions를 사용 중이시면 capgo/capacitor-transitions를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하세요. 이를 capgo/capacitor-transitions와 연결하세요. __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions의 구현 세부 사항을 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions와 연결하세요. @capgo/capacitor-transitions for the implementation detail in @capgo/capacitor-transitions, __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities를 사용하여 네이티브 기능을 사용하세요. __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities를 사용하여 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities의 네이티브 기능을 사용하세요. capgo/capacitor-live-activities capgo/capacitor-live-activities capgo/capacitor-live-activities @capgo/capacitor-live-활동들에 대한 구현 세부 정보 Using @capgo/capacitor-비디오 플레이어 Using @capgo/capacitor-비디오 플레이어에 대한 네이티브 기능