ChargEco/Strides-APP/app/pages/RouterV2.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 { 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;