ChargEco/Strides-APP/app/pages/Router.js

/**
 * 路由配置文件
 * @邠心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 About from './About';
import Launcher from './Launch';
import Login from './sign/LoginV2';
import Regist from './sign/RegisterV2'
import Home from './home/Drawer';
import Search from './home/Search';
import ChargeDetails from './charge/Details';
import QRScan from './charge/QRScan';
import Feedback from './my/Feedback';
import Privacy from './my/Privacy';
import Profile from './my/Profile';
import Condition from './my/Condition';
import Summary from './charge/Summary';
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';
import AddCard from './wallet/AddCard';
import FormCard from './payment/FormCard';
import AddVehicle from './my/AddVehicle';
import PayNow from './payment/PayNow';
import CreditCard from './payment/CreditCard';
import EditVehicle from './my/EditVehicle';
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 app from '../../app.json'

export var PageList = {
  'splash': {
    component: Launcher
  },
  'home': {
    component: Home,
    options: TransitionPresets.FadeFromBottomAndroid
  },
  'search': {
    title: 'Search',
    component: Search
  },
  'login': {
    component: Login
  },
  'register': {
    component: Regist
  },
  'chargeDetail': {
    title: 'Charging Site',
    component: ChargeDetails
  },
  'scanqr': {
    title: 'QR Scan',
    component: QRScan
  },
  'feedback': {
    title: 'Feedback',
    component: Feedback
  },
  'about': {
    title: 'About',
    component: About
  },
  'privacy': {
    title: 'Privacy Policy',
    component: Privacy
  },
  'profile': {
    title: 'Profile Settings',
    component: Profile
  },
  'condition': {
    title: 'Terms and Use',
    component: Condition
  },
  'summary': {
    title: 'Summary',
    component: Summary
  },
  'rating': {
    title: 'Your Rating',
    component: Rating
  },
  'wallet': {
    title: 'Transactions',
    component: Wallet
  },
  'editProfile': {
    title: 'My Profile',
    component: EditProfile
  },
  'editAddress': {
    title: 'Edit Address',
    component: EditAddress
  },
  'editVehicle': {
    title: 'Update Vehicle',
    component: EditVehicle
  },
  'referral': {
    title: 'Referral',
    component: Referral
  },
  'topup': {
    title: 'Top Up',
    component: Topup
  },
  'addCard': {
    title: 'Add Cards',
    component: AddCard
  },
  'addVehicle': {
    title: 'Add Vehicle',
    component: AddVehicle
  },
  'paynow': {
    title: 'PAYNOW',
    component: PayNow
  },
  'paycard': {
    title: 'Top Up with Card',
    component: CreditCard
  },
  'formCard': {
    title: 'Top Up with Card',
    component: FormCard
  },
  'paymentMethod': {
    title: 'Payment Method',
    component: PaymentMethod
  },
  'paymentWeb': {
    title: 'Make Payment',
    component: PaymentWeb
  },
  'payPeruse': {
    title: 'Pay Per Use',
    component: PayPerUse
  },
  'notify': {
    title: 'Notification Test',
    component: Notify
  },
  'mapTest': {
    component: Test
  },
  'forgotPassword': {
    component: ResetPassword
  },
  'settings': {
    title: 'Settings',
    component: Settings
  }
}

const Stack = createStackNavigator();
enableScreens();

var bakPages = undefined;

function getPages() {
  let pages = [], keys = {};
  if (bakPages == undefined) {
    bakPages = Object.assign({}, PageList);
  } else {
    PageList = bakPages;
  }
  for (const page in PageList) {
    var p = PageList[page]
    keys[page] = page; 
    pages.push(
      <Stack.Screen
        key={page}
        name={page}
        component={p.component}
        options={p.title ? Title(p.title, p.options) : noTitle(p.options)}
      />
    );
  }
  PageList = keys;
  return pages;
}

const Router = () => {
  const navigation = useRef();
  useEffect(() => {
    //注入全局方法
    global.startPage = (name, params = {}) => {
      navigation.current.navigate(name, params);
    }
    global.dispatchPage = (params) => {
      navigation.current.dispatch(params);
    }
    global.goBack = () => {
      if (navigation.current.canGoBack()) {
        navigation.current.goBack();
      }
    }
    return (() => {
      global.startPage = null;
      global.goBack = null;
    });
  }, []);
  return (
    <NavigationContainer
      ref={navigation}>
      <Stack.Navigator
        initialRouteName='splash'
        screenOptions={{animationEnabled: true, ...TransitionPresets.SlideFromRightIOS }}>
        {getPages()}
      </Stack.Navigator>
    </NavigationContainer>
  )
}

const noTitle = (opt = {}) => {
  return {
    title: isIOS ? 'Back' : app.displayName,
    headerShown: false,
    ...opt
  }
}

const Title = (title, opt = {}) => {
  return {
    title: title,
    headerShown: true,
    headerStyle: {
      ...titleHeight(),
      elevation: 0,
      backgroundColor: colorThemes
    },
    headerTintColor: '#232323',
    headerBackTitle: ' ',
    ...opt
  }
}

const titleHeight = () => {
  return isIOS ? {} : {height: toolbarSize};
}

export default Router;