אתה יכול לעבוד עם זה בכל סביבת פיתוח חוצת פלטפורמות או לא. בדרך כלל תרצה להשתמש בזה כדיי לנהל מעברי דפים ברמה גבוהה ומהירה. כדיי לנהל הסטוריית חזרות בדפים כמו באפליקציית מובייל נייטיב. אנחנו ניסינו את זה על ריאקט על ריאקט עם קורדה ועל ריאקט עם אלקטרון
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>;
לשינוי דף, שמור את הRef ואז:
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: {},
};
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
<Navigator>
</Navigator>
צור קשר למידע נוסף