だから、私は本当に Ionic と React の統合を掘り下げてきました。通常、既存の React アプリケーションに追加して、そこから移動します。
しかし、最近、私は何かに出くわしました。 方向をコントロールしたい ページ間の私の遷移の。
そして、ドキュメントは確かに何かを提供します。 routeDirection
という prop を渡すことができます いくつかの特定の Ionic コンポーネントに。しかし、コードで制御することはできません。
でも、私 、自分のコードでトランジションの方向を制御したいので、調べ始めました。
これらのトランジションが実際には Context
の一部であることが起こります NavContext
と呼ばれる @ionic/react
内 、次のことができます。
import { useContext } from "react";
import { NavContext } from "@ionic/react";
function MyComponent(){
let navigationContext = useContext(NavContext);
//forbidden by the gods, a back-animated-push
navigationContext.navigate("/route", "back");
}
したがって、スタック アニメーターを作成するために必要なのは、渡したスクリーンを処理するためのフックと、それらの間で共有される 1 つのシングルトン配列だけです。
//IonicCustomNavigation.ts
import { useContext } from "react";
import { NavContext } from "@ionic/react";
//Hook to encapsulate navigation context
export function useContextNavigation() {
let navigation = useContext(NavContext);
return navigation;
}
//Stack
let stack: string[] = ["/"];
export function useStackNavigation() {
let navigation = useContextNavigation();
console.log(stack);
function navigateTo(screen: string) {
let indexOfScreenOnStack = stack.indexOf(screen);
if (indexOfScreenOnStack != -1) {
if (indexOfScreenOnStack == stack.length - 1) return;
stack = stack.slice(0, indexOfScreenOnStack);
navigation.navigate(screen, "back");
} else {
navigation.navigate(screen, "forward");
}
stack.push(screen);
}
return navigateTo;
}
そして完了! navigateTo
に追加のパラメータを渡す必要があります 状態を処理したい場合は関数を使用しますが、それは簡単です。
解決策を検討するのにしばらく時間を費やしましたが、それでうまくいくようです。
参考までに、私が使用している Ionic と Ionic/React のバージョンは次のとおりです。
/**
"@ionic/react-router@^5.0.0":
version "5.0.0"
resolved "https://registry.yarnpkg.com/@ionic/react-router/-/react-router-5.0.0.tgz#939e9619cceebc2603cc738eb276d3bd6b523762"
integrity sha512-IjBSZtel1W9zJvdwI9Z8LOHS9eOWhulumiTuvG2yD1Qj6dQ8Cp67zOYdHhxkhH2JBnxILC+vJgXp/0pnEFIu2Q==
dependencies:
tslib "*"
"@ionic/react@^5.0.0":
version "5.0.0"
resolved "https://registry.yarnpkg.com/@ionic/react/-/react-5.0.0.tgz#12a7ea61ce7e9e35a27768628370020bbfd6091a"
integrity sha512-Q6uPAyWa01XLoZ7MdeM0xRKID8SR/hFuoGIjXFlawq2TKwiPCZbSjegHXdFHcX0LHTC/iQuu4Ly2d8UaD5ljZQ==
dependencies:
"@ionic/core" "5.0.0"
ionicons "^5.0.0"
tslib "*"
*/