בואו נדבר חדשנות
support-icon

ניהול דפים ומעברים

זה מנהל את הדפים באפליקציה שלך ואת מעברי הדפים כמו אפליקציית מובייל.

אתה יכול לעבוד עם זה בכל סביבת פיתוח חוצת פלטפורמות או לא. בדרך כלל תרצה להשתמש בזה כדיי לנהל מעברי דפים ברמה גבוהה ומהירה. כדיי לנהל הסטוריית חזרות בדפים כמו באפליקציית מובייל נייטיב. אנחנו ניסינו את זה על ריאקט על ריאקט עם קורדה ועל ריאקט עם אלקטרון

Simple Demo

Try simple example code

 import Navigator from "undefined";

לדוגמה: בהחזרת הפונקציה

<Navigator onRef={(ref) => (navigatorRef = ref)} onError={(error) => {}}>
  <MyHomePage key="home" levelPage={0} />

  <AboutPage
    key="about"
    levelPage={1}
    transitionIn="fadeInRight"
    transitionOut="fadeOutLeft"
  />
</Navigator>;
הערה
levelPage
זה חשוב והוא כל הלוגיקה בפלגאין זה. זה דואג לשמור את הפרטים על דף ברמה נמוכה יותר. דף ברמה נמוכה יותר ישאר חיי וכך כשחוזרים אליו הוא נשאר כמו שהוא וגם הstate לא משנה. בנוסף זה מגדיר לאיזה דף לחזור ומונע חזרה קדימה

לשינוי דף, שמור את הRef ואז:

navigatorRef.changePage("about");

navigatorRef.changePage("about");

navigatorRef.changePage(
  goToPage, //Required
  { options } // Not requred
);
const options = {
  transitionIn: "fadeInRight", // have defult
  transitionOut: "fadeOutLeft", // have defult
  timeAnimationInMS: integer, // defult=250(ms)
  callbackFun: () => {},
  props: {},
}; 
*animationIn and animationOut need name animate from animate.style
*the animate.css includ in this package

השתמש עם react-router

import React from "react";
import Navigator from "undefined";

//import all pages
import Home from "../pages/index";
import Page2 from "../pages/page2";

// #Hooks
import { BrowserRouter, HashRouter,HashRouter,Routes, useParams } from "react-router-dom";
import { createBrowserHistory } from "history";

// ## use history
const history = createBrowserHistory();

const useRouter = (props) => {
  let Router = BrowserRouter;
  if (window.cordova.platformId !== "browser") Router = HashRouter;

  return (
 <HashRouter history={history}>
    <Routes>
      {[
        "/:key",
        "/",
        "*",
      ].map((path, index) => (
        <Route
          key={index}
          path={path}
          element={<UseNavigator {...props} />}
        ></Route>
      ))}
    </Routes>
 </HashRouter>
  );
};

const UseNavigator = (props) => {
  // # init navigator ref
  let navigatorRef = undefined;

  const { key } = useParams();
  // let query = useQuery();
  return (
    <div>
      <Navigator routeKey={key} changeRoute={false}>
        <Home key="home" levelPage={0} />
        <Page2 key="page2" levelPage={1} />
      </Navigator>
    </div>
  );
};

export default useRouter;

בדיקה באיזה דף אנחנו נמצאים כרגע

const nowPage = navigatorRef.nowPage;

קבל רשימת היסטורית הדפים

const historyPages = navigatorRef.historyPages();

קבלת רשימת הדפים לפי רמות

const listLevelPages = navigatorRef.listLevelPages();

חזור דף אחד אחורה

navigatorRef.back();

או

navigatorRef.back({options...});

options => { animationIn:integer // have defult , animationOut:string // have defult , timeAnimationInMS:integer // defult=250(ms) , callbackFun:function , props:{...} }

בדוק אם מנהל הדפים עסוק (יחזיר אמת כשבאמצע מעבר דף)

const navigator_busy = navigatorRef.busy;

*busy return boolean

react.cordova-navigation_controller

אפשריות

<Navigator props={}>


<Navigator>

<Child props={}>

</Navigator>

רכוש את שירותינו לעזרה

צור קשר למידע נוסף

כיף איתנו! הצטרפו לניוזלטר שלנו