IonicReactv6와 setupIonicReact가 간지러운 곳.

https://ionicframework.com/
나는 정말 Ionic이 이전과 비교해 아주 좋은 것이 되었다는 것을 느꼈다.
코도바 파생만 지원하는 앙글라는 리액트나 베일에 관계없이 믹스앱을 개발할 수 있다.현재 준비된 것은 명령선 도구와 구성 요소일 뿐, 이미 상당히 날씬해졌다.
그러나 이에 대응하는 JS라이브러리(프레임)가 늘어나고 그에 따른 유지보수 규모도 늘어 위원회가 어려움을 느끼면서 운용하고 있는 게 아닌지 제멋대로 추측했다.갱신의 속도를 보면 수정 하나하나가 미세한 오류를 남기는데 이것이 바로 이야기라고 생각한다.
꼭 해야 할 사소한 것들이 많기 때문에 큰 문제 등은 잠시 무시하는 것이 세상의 상사인가.
이번에는 Ionic Reactv6로 업그레이드를 통해 setup Ionic React가 가려운 곳을 일시적으로 해결하는 방법을 쓰고 싶습니다.

해결하고 싶다

서로 다른 페이지에 따라 다음과 같은 규격 등이 있다

숨기고 싶어NavigationBottomBar

희망スワイプ귀환

문제점

IonicReactv6 에서 react-router v6 에 대응하지 않음
여기까지.
(Ionic 측의 코드를 관찰하여 루트 역사에서 페이지 애니메이션을 실현하는 등 상하 문화를 관찰하기 때문에 대응하는 난이도를 이해할 수 있다)
react-router v6가 파괴적인 변경을 했다는 것을 아는 사람이 있을 것 같습니다.그러나 아주 좋은 실현, 각 단점의 재활동의 실현도 있다.즉, 임의의 단점 내의 페이지 간의 실현이 가능하다고 말할 수 있다.
이것은 가능하며, 상기 탭 사이에 탭을 숨기고 교환을 통해 탭을 되돌려주는 처리를 쉽게 수행할 수 있습니다.

해결책

라벨과 교환 등 로고를 메모리 관리하다.모든 부모 페이지에서 설정합니다.
Jootai 사용
https://jotai.org

models/platform.ts
이번에는 다크 모드 등의 설정을 생략하도록 허락해 주세요.swipeBackEnabled종IonicConfig상속

import { IonicConfig } from '@ionic/core';

/**
 * 参考URL:
 * https://ionicframework.com/docs/ja/react/config
 * @interface
 */
export interface PlatformConfig extends IonicConfig {
  isSubPage?: boolean;
  isDarkMode?: boolean;
};

stores/platform.ts

import { atom } from 'jotai';
import { PlatformConfig } from 'models/platform';

/**
 * @interface
 */
export const curPlatformConfigState = atom<PlatformConfig>({
  isSubPage: false,
  isDarkMode: false,
  swipeBackEnabled: false,
});

App.tsx (또는 임의의 루트 설정 파일)IonTabBar의 hidden 속성에서 수시로 숨기기

const config = useAtomValue(curPlatformConfigState);
setupIonicReact(config);

....

<IonTabs>
  <IonRouterOutlet>
    ...
  </IonRouterOutlet>
  <IonTabBar
    slot={"bottom"}
    hidden={config.isSubPage}
  >
    ...
  </IonTabBar>
</IonTabs>

페이지별 (ex.HogeListPage.tsx 및 HogeDetailPage.tsx)
Ionic 라이프 사이클useIonViewWillEnter을 사용하여 실제 재생이 시작되기 전에 필요한 설정

ex. HogeListPage.tsx
태그에 빈칸으로 답장하기 싫어요.

useIonViewWillEnter(() => {
    // 初期設定
    setPlatformConfig({
      isSubPage: false,
      swipeBackEnabled: false,
    });
});

ex. HogeDetailPage.tsx
태그를 숨기고 목록 페이지로 공백으로 돌아가기

useIonViewWillEnter(() => {
    // 初期設定
    setPlatformConfig({
      isSubPage: true,
      swipeBackEnabled: true,
    });
});

react-router v6에 해당하면

IonicReactV6를 계속 유지한다면 react-router v6의 대응은 없을 것 같습니다.
며칠 전1.0에 대한 업데이트가 있었지만 대응이 없었기 때문에 대응은 V7(올가을)일 것으로 보인다.
또한 임의의 단점에 라벨 간의 처리를 넣기 때문에 각 모페이지에 설정할 필요가 없다.
각 부모 페이지에 설치된 쓰레기는 영향 범위가 비교적 작은 스팸 코드만 초래하기 때문에 임의의 시간에 삭제하면 된다