add app/pages/Router.js

Strides-SPAPP/app/pages/Router.js

@@ -0,0 +1,564 @@
+/**
+ * 路由配置文件
+ * @邠心vbe on 2021/03/22
+ */
+import React, { useEffect, useRef } from 'react';
+import { Pressable } from 'react-native';
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
+import { enableScreens } from 'react-native-screens';
+import Toolbar, { BackButton, Styles } from '../components/Toolbar';
+import app from '../../app.json';
+import About from './about/AboutV2';
+import Launcher from './Launch';
+import Login from './sign/Login';
+import Regist from './sign/RegisterV2';
+import RegisterV3 from './sign/RegisterV3';
+import RegisterV4 from './sign/RegisterV4';
+import RegisterPublic from './sign/RegisterPublic';
+import RegisterDriver from './sign/RegisterDriver';
+import Home from './home/Index';
+import Search from './search/SearchV2';
+import SearchV3 from './search/SearchV3';
+import ChargeDetails from './charge/Details';
+import QRScan from './charge/QRScan';
+import Feedback from './my/Feedback';
+import Privacy from './my/Privacy';
+import Profile from './my/ProfileV2';
+import ProfileV3 from './my/ProfileV3';
+import Condition from './my/Condition';
+import Summary from './chargeV2/SummaryV2';
+import SummaryV3 from './chargeV2/SummaryV3';
+import Rating from './charge/Rating';
+import Wallet from './wallet/Wallet';
+import EditProfile from './my/EditProfile';
+import Referral from './my/Referral';
+import Topup from './wallet/Topup'; //not 2C2P
+import TopupV2 from './wallet/TopupV2'; //2C2P payment
+import TopupNew from './wallet/TopupNew';
+import AddCard from './wallet/AddCard';
+import FormCard from './payment/FormCard';
+import VehicleList from './vehicles/VehicleList';
+import AddVehicle from './vehicles/AddVehicle';
+import EditVehicle from './vehicles/EditVehicle';
+import VehicleDetail from './vehicles/VehicleDetail';
+import PayNow from './payment/PayNow';
+import CreditCard from './payment/CreditCard';
+import EditAddress from './my/EditAddress';
+import Notify from './home/Notify';
+import Test from './home/maps/Test';
+import ResetPassword from './sign/ResetPasswordV2';
+import PaymentMethod from './payment/PaymentMethod';
+import PayPerUse from './payment/PayPerUse';
+import PaymentWeb from './payment/PaymentWeb';
+import Settings from './Settings';
+import ChargeAdapter from './chargeV2/ChargeAdapter';
+import ChargingPage from './chargingV2/ChargingPage';
+import ChargingPageV4 from './chargingV3/ChargingPage';
+import { BridgePage } from '../utils/routeUtil';
+import HeaderTitle from '../components/HeaderTitle';
+import Bookmarks from './bookmark/Bookmarks';
+import MembersList from './member/MembersList';
+import ApplyMember from './member/ApplyMember';
+import Contact from './about/Contact';
+import Notification from './alert/Notification';
+import ViewAlerts from './alert/ViewAlerts';
+import ViewCampaign from './alert/ViewCampaign';
+import RefundPolicy from './payment/RefundPolicy';
+import ViewArticle from './alert/ViewArticle';
+import VehicleListV2 from './vehicles/VehicleListV2';
+import HistoryList from './wallet/HistoryList';
+import VoucherPage from './vouchers/VoucherPage';
+import VoucherSelect from './vouchers/VoucherSelect';
+import VoucherDetails from './vouchers/VoucherDetails';
+import PointsHistory from './vouchers/PointsHistory';
+import Transaction from './transaction/Transaction';
+import LoginVL from './signLumi/LoginVL';
+import RegisterVL from './signLumi/RegisterVL';
+import ForgotPwdVL from './signLumi/ForgotPwdVL';
+import Wallets from './wallets/Wallets';
+import utils from '../utils/utils';
+
+export var PageList = {
+  'splash': {
+    component: Launcher
+  },
+  'home': {
+    component: Home,
+    options: TransitionPresets.FadeFromBottomAndroid
+  },
+  'bridge': {
+    component: BridgePage
+  },
+  'search': {
+    title: 'Search',
+    titleScope: 'route.search',
+    component: app.isLumiWhitelabel ? SearchV3 : Search
+  },
+  'login': {
+    component: app.isLumiWhitelabel ? LoginVL : Login
+  },
+  'register': {
+    component: RegisterV4,
+    title: 'Public Registration',
+    titleScope: 'route.publicRegister'
+  },
+  'registerLumi': {
+    component: RegisterVL,
+    title: 'Registration',
+    titleScope: 'sign.btnRegister'
+  },
+  'registerPublic': {
+    component: RegisterPublic,
+    title: 'Public Registration',
+    titleScope: 'route.publicRegister'
+  },
+  'registerFleet': {
+    component: RegisterDriver,
+    title: 'Fleet / PHV Registration',
+    titleScope: 'route.driverRegister'
+  },
+  'chargeDetail': {
+    title: 'Charging Site',
+    titleScope: 'route.chargingSite',
+    component: ChargeDetails
+  },
+  'chargeDetailPage': {
+    title: 'Charging Site',
+    titleScope: 'route.chargingSite',
+    component: ChargeAdapter
+  },
+  'chargingPage': {
+    title: 'Charging',
+    titleScope: 'route.charging',
+    component: ChargingPage
+  },
+  'chargingPageV4': {
+    title: 'Charging',
+    titleScope: 'route.charging',
+    component: ChargingPageV4
+  },
+  'scanqr': {
+    title: 'QR Scan',
+    titleScope: 'route.qrScan',
+    component: QRScan
+  },
+  'feedback': {
+    title: 'Feedback',
+    titleScope: 'route.feedback',
+    component: Feedback
+  },
+  'about': {
+    title: 'About',
+    titleScope: 'route.about',
+    component: About
+  },
+  'supportContact': {
+    title: 'Support Hotline',
+    titleScope: 'support.supportHotline',
+    component: Contact
+  },
+  'privacy': {
+    title: 'Privacy Policy',
+    titleScope: 'route.privacyPolicy',
+    component: Privacy
+  },
+  'condition': {
+    title: 'Terms of Use',
+    titleScope: 'route.termsOfUse',
+    component: Condition
+  },
+  'profile': {
+    title: 'Profile Settings',
+    titleScope: 'route.profileSettings',
+    component: Profile
+  },
+  'profileV3': {
+    component: ProfileV3
+  },
+  'summary': {
+    title: 'Summary',
+    titleScope: 'receipt.receipt',
+    component: app.charge.newSummary ? SummaryV3 : Summary
+  },
+  'rating': {
+    title: 'Your Rating',
+    titleScope: 'route.rating',
+    component: Rating
+  },
+  'wallet': {
+    title: 'Transactions',
+    titleScope: 'route.wallet',
+    component: Wallet
+  },
+  'wallets': {
+    title: 'Wallets',
+    titleScope: 'route.wallets',
+    component: Wallets
+  },
+  'history': {
+    title: 'History',
+    titleScope: 'route.history',
+    component: HistoryList
+  },
+  'transaction': {
+    title: 'Transactions',
+    titleScope: 'route.wallet',
+    component: Transaction
+  },
+  'editProfile': {
+    title: 'My Profile',
+    titleScope: 'route.editProfile',
+    component: EditProfile
+  },
+  'editAddress': {
+    title: 'Edit Address',
+    titleScope: 'route.editAddress',
+    component: EditAddress
+  },
+  'referral': {
+    title: 'Referral',
+    titleScope: 'route.referral',
+    component: Referral
+  },
+  'topup': {
+    title: 'Top Up',
+    titleScope: 'route.topUp',
+    component: Topup
+  },
+  'topupV2': {
+    title: 'Top Up',
+    titleScope: 'route.topUp',
+    component: TopupV2
+  },
+  'topupNew': {
+    title: 'Top Up',
+    titleScope: 'route.topUp',
+    component: TopupNew
+  },
+  'addCard': {
+    title: 'Add Cards',
+    titleScope: 'route.addCards',
+    component: AddCard
+  },
+  'myVehicles': {
+    title: 'My Vehicles',
+    titleScope: 'route.myVehicles',
+    component: VehicleList,
+    options: {
+      headerRight: () => (
+        <Pressable
+          style={Styles.backIcon}
+          android_ripple={rippleLessIcon}
+          onPress={() => startPage(PageList.addVehicle)}>
+          <MaterialCommunityIcons
+            name='plus'
+            color={pageTitleTint}
+            size={24}
+            style={Styles.iconOpacity}
+          />
+        </Pressable>
+      )
+    }
+  },
+  'vehiclesListV2': {
+    title: 'My Vehicles',
+    titleScope: 'route.myVehicles',
+    component: VehicleListV2
+  },
+  'addVehicle': {
+    title: 'Add Vehicle',
+    titleScope: 'route.addVehicle',
+    component: AddVehicle
+  },
+  'editVehicle': {
+    title: 'Update Vehicle',
+    titleScope: 'route.editVehicle',
+    component: EditVehicle
+  },
+  'addVehicleV2': {
+    title: 'Add Vehicle',
+    titleScope: 'route.addVehicle',
+    component: VehicleDetail
+  },
+  'editVehicleV2': {
+    title: 'Update Detail',
+    titleScope: 'route.editVehicle',
+    component: VehicleDetail
+  },
+  'paynow': {
+    title: 'PAYNOW',
+    titleScope: 'route.paynow',
+    component: PayNow
+  },
+  'paycard': {
+    title: 'Top Up with Card',
+    titleScope: 'route.topUpWithCard',
+    component: CreditCard
+  },
+  'formCard': {
+    title: 'Top Up with Card',
+    titleScope: 'route.topUpWithCard',
+    component: FormCard
+  },
+  'paymentMethod': {
+    title: 'Payment Method',
+    titleScope: 'route.paymentMethod',
+    component: PaymentMethod
+  },
+  'paymentWeb': {
+    title: 'Make Payment',
+    titleScope: 'route.makePayment',
+    component: PaymentWeb
+  },
+  'payPeruse': {
+    title: 'Pay Per Use',
+    titleScope: 'route.payPerUse',
+    component: PayPerUse
+  },
+  'notification': {
+    title: 'Notification',
+    titleScope: 'route.notifications',
+    component: Notification
+  },
+  'viewMessage': {
+    title: 'View Message',
+    titleScope: 'notification.viewMessage',
+    component: ViewAlerts
+  },
+  'viewArticle': {
+    //title: 'View Article',
+    //titleScope: 'notification.viewMessage',
+    component: ViewArticle
+  },
+  'viewCampaign': {
+    //title: 'View Campaign',
+    //titleScope: 'notification.viewMessage',
+    component: ViewCampaign
+  },
+  'notify': {
+    title: 'Notification Test',
+    titleScope: 'route.notificationTest',
+    component: Notify
+  },
+  'mapTest': {
+    component: Test
+  },
+  'forgotPassword': {
+    title: 'Forgot Password',
+    titleScope: 'route.forgotPassword',
+    component: ResetPassword
+  },
+  'forgotPasswordLumi': {
+    title: 'Forgot Password',
+    titleScope: 'route.forgotPassword',
+    component: ForgotPwdVL
+  },
+  'changePassword': {
+    title: 'Account Security',
+    titleScope: 'route.changePassword',
+    component: ResetPassword
+  },
+  'bookmarks': {
+    title: "Bookmarks",
+    titleScope: 'route.bookmarks',
+    component: Bookmarks
+  },
+  'membersList': {
+    title: "Your Membership",
+    titleScope: 'route.yourMembers',
+    component: MembersList,
+    options: {
+      headerRight: () => (
+        <Pressable
+          style={Styles.backIcon}
+          android_ripple={rippleLessIcon}
+          onPress={() => startPage(PageList.applyMember)}>
+          <MaterialCommunityIcons
+            name='plus'
+            color={pageTitleTint}
+            size={24}
+            style={Styles.iconOpacity}
+          />
+        </Pressable>
+      )
+    }
+  },
+  'applyMember': {
+    title: "Apply Membership",
+    titleScope: 'route.applyMember',
+    component: ApplyMember
+  },
+  'refundPolicy': {
+    title: "Refund Policy",
+    titleScope: 'route.refundPolicy',
+    component: RefundPolicy
+  },
+  'myVoucher': {
+    title: "Vouchers",
+    titleScope: 'route.vouchers',
+    component: VoucherPage
+  },
+  'voucherDetails': {
+    title: "Voucher Details",
+    titleScope: 'route.voucherDetails',
+    component: VoucherDetails
+  },
+  'selectVoucher': {
+    title: "Select Voucher",
+    titleScope: 'route.selectVoucher',
+    component: VoucherSelect
+  },
+  'pointsHistory': {
+    title: "Points History",
+    titleScope: 'route.pointsHistory',
+    component: PointsHistory
+  },
+  'settings': {
+    title: 'Settings',
+    titleScope: 'route.settings',
+    component: Settings
+  }
+}
+
+export const setPageList = (list) => {
+  if (list) {
+    PageList = list;
+    //console.log("设置List", PageList);
+  }
+}
+
+const Stack = createStackNavigator();
+enableScreens();
+
+/**
+ * 配置APP主题色
+ */
+const themeColor = {
+  text: textPrimary,
+  card: colorThemes,
+  primary: colorPrimary,
+  background: pageBackground,
+  notification: colorDark
+}
+
+const noTitle = (opt = {}) => {
+  return {
+    title: isIOS ? 'Back' : app.displayName,
+    headerShown: false,
+    ...opt
+  }
+}
+
+/**
+ * 配置标题
+ * @param {String} title 页面标题
+ * @param {Object} opt 标题栏选项
+ * @returns 
+ */
+const Title = (title, opt = {}, titleScope) => {
+  const options = {
+    headerShown: true,
+    headerStyle: {
+      ...titleHeight(),
+      elevation: 0,
+      shadowOpacity: 0,
+      borderBottomWidth: 0,
+      backgroundColor: app.isWhitelabel ? colorLight : colorPrimary //配置标题栏背景
+    },
+    headerTintColor: pageTitleTint, //配置标题栏文字和图标颜色
+    headerBackTitle: ' ', //配置iOS返回按钮文字
+    headerBackTitleVisible: false,
+    ...opt
+  }
+  if (titleScope && $t) {
+    //options.headerTitle = () => <HeaderTitle scope={titleScope}/>
+    options.header = () => <Toolbar scope={titleScope} rightIcon={options?.headerRight}/>
+  } else {
+    options.title = title;
+    options.header = () => <Toolbar scope={titleScope} rightIcon={options?.headerRight}/>
+    //options.headerLeft = () => <BackButton/>
+  }
+  return options;
+}
+
+
+var bakPages = undefined;
+
+function getPages() {
+  let pages = [], keys = {};
+  if (bakPages == undefined) {
+    bakPages = Object.assign({}, PageList);
+  } else {
+    setPageList(bakPages);
+  }
+  for (const page in bakPages) {
+    var p = bakPages[page]
+    keys[page] = page;
+    pages.push(
+      <Stack.Screen
+        key={page}
+        name={page}
+        component={p.component}
+        options={p.title ? Title(p.title, p.options, p.titleScope) : noTitle(p.options)}
+      />
+    );
+  }
+  setPageList(keys);
+  return pages;
+}
+
+const Router = () => {
+  const navigation = useRef();
+  useEffect(() => {
+    //注入全局方法
+    global.startPage = (name, params = {}) => {
+      if (utils.isNotEmpty(name)) {
+        navigation.current?.navigate(name, params);
+      }
+    }
+    global.dispatchPage = (params) => {
+      navigation.current?.dispatch(params);
+    }
+    global.goBack = () => {
+      if (global.pageBackFallback && global.pageBackFallback.names) {
+        //console.log("覆盖返回", navigation.current.getCurrentRoute()?.name);
+        if (global.pageBackFallback.names.indexOf(navigation.current.getCurrentRoute()?.name) >= 0) {
+          global.pageBackFallback?.callback();
+          global.pageBackFallback = undefined;
+          return;
+        }
+      }
+      if (navigation.current?.canGoBack()) {
+        navigation.current?.goBack();
+      } else {
+        startPage(PageList.home);
+      }
+    }
+    return (() => {
+      global.startPage = null;
+      global.goBack = null;
+    });
+  }, []);
+  return (
+    <NavigationContainer
+      ref={navigation}
+      theme={{
+        ...DefaultTheme,
+        dark: darkMode,
+        colors: themeColor
+      }}>
+      <Stack.Navigator
+        initialRouteName='splash'
+        screenOptions={{animationEnabled: true, ...TransitionPresets.SlideFromRightIOS }}>
+        {getPages()}
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
+}
+
+const titleHeight = () => {
+  return isIOS ? {} : {height: toolbarSize};
+}
+
+export default Router;

Strides-SPAPP/app/pages/RouterV2.js

@@ -0,0 +1,145 @@
+/**
+ * 路由配置文件
+ * @邠心vbe on 2021/03/22
+ */
+import React, { useEffect, useRef } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
+import { enableScreens } from 'react-native-screens';
+import { BackButton } from '../components/Toolbar';
+import app from '../../app.json';
+import { PageList, setPageList } from './Router';
+import ToolbarUgly from '../components/ToolbarUgly';
+import utils from '../utils/utils';
+const Stack = createStackNavigator();
+enableScreens();
+
+/**
+ * 配置APP主题色
+ */
+const themeColor = {
+  text: textPrimary,
+  card: colorThemes,
+  primary: colorPrimary,
+  background: pageBackground,
+  notification: colorDark
+}
+
+const noTitle = (opt = {}) => {
+  return {
+    title: isIOS ? 'Back' : app.displayName,
+    headerShown: false,
+    ...opt
+  }
+}
+
+/**
+ * 配置标题
+ * @param {String} title 页面标题
+ * @param {Object} opt 标题栏选项
+ * @returns 
+ */
+const Title = (title, opt = {}, titleScope) => {
+  const options = {
+    headerShown: true,
+    headerStyle: {
+      ...titleHeight(),
+      elevation: 0,
+      shadowOpacity: 0,
+      borderBottomWidth: 0,
+      backgroundColor: app.isWhitelabel ? colorLight : colorPrimary //配置标题栏背景
+    },
+    headerTintColor: pageTitleTint, //配置标题栏文字和图标颜色
+    headerBackTitle: ' ', //配置iOS返回按钮文字
+    headerBackTitleVisible: false,
+    ...opt
+  }
+  if (titleScope && $t) {
+    options.header = () => <ToolbarUgly scope={titleScope} rightIcon={options?.headerRight}/>
+    //options.headerTitle = () => <HeaderTitle scope={titleScope}/>
+  } else {
+    options.title = title
+  }
+  options.headerLeft = () => <BackButton/>
+  return options;
+}
+
+
+var bakPages = undefined;
+
+function getPages() {
+  let pages = [], keys = {};
+  if (bakPages == undefined) {
+    bakPages = Object.assign({}, PageList);
+  } else {
+    setPageList(bakPages);
+  }
+  for (const page in bakPages) {
+    var p = bakPages[page]
+    keys[page] = page;
+    pages.push(
+      <Stack.Screen
+        key={page}
+        name={page}
+        component={p.component}
+        options={p.title ? Title(p.title, p.options, p.titleScope) : noTitle(p.options)}
+      />
+    );
+  }
+  setPageList(keys);
+  return pages;
+}
+
+const RouterV2 = () => {
+  const navigation = useRef();
+  useEffect(() => {
+    //注入全局方法
+    global.startPage = (name, params = {}) => {
+      if (utils.isNotEmpty(name)) {
+        navigation.current?.navigate(name, params);
+      }
+    }
+    global.dispatchPage = (params) => {
+      navigation.current?.dispatch(params);
+    }
+    global.goBack = () => {
+      if (global.pageBackFallback && global.pageBackFallback.names) {
+        //console.log("覆盖返回", navigation.current.getCurrentRoute()?.name);
+        if (global.pageBackFallback.names.indexOf(navigation.current.getCurrentRoute()?.name) >= 0) {
+          global.pageBackFallback?.callback();
+          global.pageBackFallback = undefined;
+          return;
+        }
+      }
+      if (navigation.current?.canGoBack()) {
+        navigation.current?.goBack();
+      } else {
+        startPage(PageList.home);
+      }
+    }
+    return (() => {
+      global.startPage = null;
+      global.goBack = null;
+    });
+  }, []);
+  return (
+    <NavigationContainer
+      ref={navigation}
+      theme={{
+        dark: darkMode,
+        colors: themeColor
+      }}>
+      <Stack.Navigator
+        initialRouteName='splash'
+        screenOptions={{animationEnabled: true, ...TransitionPresets.SlideFromRightIOS }}>
+        {getPages()}
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
+}
+
+const titleHeight = () => {
+  return isIOS ? {} : {height: toolbarSize};
+}
+
+export default RouterV2;