JavaScript >> Javascript チュートリアル >  >> React

Ionic と React を使用して、適切なアニメーションを備えたスタック ナビゲーターを作成します。

だから、私は本当に 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 "*"
*/

  1. 有限ステートマシンの実用的な紹介

  2. 組み込み Web ゲーム コンソールでの Scratch 3.0 の不具合

  3. 文字列からすべてのハイフンを削除する JavaScript の 3 つの方法