记RN路由系统重构-react-navigation

简单说明

目前react-native项目中使用的路由是react-navigation，官方的路由只是简单的示例，页面过多后，App.tsx主页面需要复制粘贴许多RootStack.Screen，路由navigation需要逐层传递，当然也可以是实用useDispatch和useNavigation等hooks获取，但为了方便管理和升级路由系统，封装了routers以及MRouters 管理类，部分完整代码直接拖到最后可以查看。

路由系统改造主要是包括路由配置src/router.js、路由管理src/framework/MRouter.ts、页面使用src/app.tsx三部分

路由配置src/router.js

1.路由动画枚举animationType

const animationType = {
  default: 'default',
  fade: 'fade',
  fade_from_bottom: 'fade_from_bottom',
  flip: 'flip',
  none: 'none',
  simple_push: 'simple_push',
  slide_from_bottom: 'slide_from_bottom',
  slide_from_right: 'slide_from_right',
  slide_from_left: 'slide_from_left'
}

2.路由屏幕屏幕方向枚举orientationType

const orientationType = {
  default: 'default',
  all: 'all',
  portrait: 'portrait',
  portrait_up: 'portrait_up',
  portrait_down: 'portrait_down',
  landscape: 'landscape',
  landscape_left: 'landscape_left',
  landscape_right: 'landscape_right'
}

3.默认路由配置screenConfig

const screenConfig: NativeStackNavigationOptions = {
  headerShown: true,
  headerShadowVisible: false,
  headerTitleAlign: 'center',
  headerBackTitle: '',
  headerBackVisible: false,
  headerBackTitleVisible: false,
  headerTintColor: '#3D3F43',
  animation: animationType.slide_from_right,
  orientation: orientationType.portrait,
  headerStyle: {
    backgroundColor: '#fff',
    // @ts-ignore
    borderBottomWidth: 0
  },
  headerTitleStyle: {
    fontSize: 18,
    fontWeight: '500',
    color: '#3D3F43'
  }
};

自定义HeaderTitlegetHeaderTitle

const getHeaderTitle = (text) => {
  return (
    <View style={{
      height: 28,
      marginBottom: 8,
      // backgroundColor: '#f00',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <UIText style={[{
        fontSize: 18,
        fontWeight: '500'
      }, { color: '#3D3F43' }]}>{text}</UIText>
    </View>
  );
};

screen option生成getOptions

const getOptions = (param: NativeStackNavigationOptions) => {
  const options: NativeStackNavigationOptions = {
    ...screenConfig,
    ...param,
    headerLeft: () => <HeaderBackArrow />,
    headerTitle: () => getHeaderTitle(param.title || '')
  };
  return options;
};

路由配置对象routers

路由中包括name、options、compenent三部分

name代表当前路由名称

options代表当前路由的配置，主要包括title``anmimation``headerShown``gestureEnabled等配置项，具体有哪些配置项参考NativeStackNavigationOptions类

component代表当前路由的组件

const routers = {
  Login: { name: 'Login', options: getOptions({ animation: animationType.slide_from_bottom, headerShown: false }), component: Login },
  Info: { name: 'Info', options: getOptions({}), component: Info },
  Tabbar: { name: 'Tabbar', options: getOptions({ animation: animationType.slide_from_right }), component: Tabbar },
  Agreement: { name: 'Agreement', options: getOptions({}), component: Agreement },
  ...
}

路由管理src/framework/MRouter.ts

1.路由ref设置

let _navigator: any;

/**
 * 设置路由ref
 * @param navigatorRef 路由ref
 */
function setNavigator(navigatorRef: any) {
  _navigator = navigatorRef;
  logInfo('setNavigator');
}

2.打开新页面

主要newPage参数使用，可开启新页面不会回跳旧页面

/**
 * 打开一个新页面
 * @param name 路由名称
 * @param params 路由参数
 * @param newPage 是否开启新页面 默认false
 */
function open(name: string, params?: any, newPage?: boolean) {
  let index = indexOfRouteByName(name);
  let route = getRouteInfoByName(name);
  let item: any = {
    key: route?.key || name,
    name: name,
    path: name,
    params: params || null
  };
  console.log('newPage', newPage, index);
  if (newPage || index === -1) item.key = name + generateRandom();

  _navigator.dispatch(CommonActions.navigate(item));
  logInfo('open', name);
}

3.重置路由栈

/**
 * 将路由name重置到首页 并且清空路由栈
 * @param name 路由名称
 * @param params 路由参数
 */
function home(name: string, params?: object) {
  try {
    let item = {
      name: name,
      path: name,
      params: params,
      key: name + generateRandom()
    };

    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [item]
      })
    );
  } catch (e) {
    errorHandler.noRoute(name);
  }
  logInfo('home', name);
}

4.路由替换

/**
 * 将栈顶的路由替换为${name}路由
 * @param name 路由名称
 * @param params 路由参数
 */
function replace(name: string, params?: any) {
  let routers = _navigator.getRootState().routes || [];
  let index = indexOfRouteByName(name);
  if (name && index > -1) {
    let item = {
      index,
      name: name,
      path: name,
      key: routers[index].key
    };
    if (index > -1) routers = routers.slice(0, index);
    routers.push(item);
    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: routers
      })
    );
  } else {
    routers.pop();
    let item = {
      name: name,
      params: params,
      path: name,
      key: name + generateRandom()
    };
    routers.push(item);
    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: routers
      })
    );
  }
  logInfo('replace', name);
}

路由返回

主要name参数，不传就默认往回跳转一页，传了就调用open方法跳转到原来就有的那一页

/**
 * 路由回退
 * @param name 路由名称
 * @param params 回调参数
 */
function back(name?: string, params?: any) {
  let index = -1;
  let route = null;
  if (name) {
    index = indexOfRouteByName(name);
    route = getRouteInfoByName(name);
  } else {
    route = _navigator.getRootState().routes[_navigator.getRootState().routes.length - 1];
  }

  if (index > -1) {
    open(route.name, params);
  } else {
    close();
  }

  params &&
    _navigator.dispatch(
      CommonActions.setParams({
        params: params,
        key: route && route.key,
        source: route && route.key
      })
    );

  logInfo('back', name);
}

关闭当前路由

/**
 * 关闭当前路由
 */
function close() {
  if (_navigator.canGoBack()) {
    _navigator.dispatch(CommonActions.goBack());
  }
  logInfo('close');
}

获取路由name在路由栈中当前的位置

查找的顺序是从后往前找

/**
 * 获取路由name在路由栈中当前的位置  从后往前查找
 * @param name 路由名称
 * @returns 返回index
 */
function indexOfRouteByName(name: string) {
  let routers = _navigator.getRootState().routes || [];
  let index = -1;
  let routeIndex = routers.length;
  console.log('indexOfRouteByName', name, routeIndex, routers);
  while (routeIndex > 0) {
    routeIndex--;
    let route = routers[routeIndex];
    if (route.name === name) {
      index = routeIndex;
      break;
    }
  }
  return index;
}

根据页面名字获取页面所在路由的信息

/**
 * 根据页面名字获取页面所在路由的信息
 * @param  {String} name 页面名字
 * @return {{name,key,path,params}}      页面所在路由,如果没有则返回 null
 */
function getRouteInfoByName(name: string) {
  let routers = _navigator.getRootState().routes || [];
  let routeIndex = routers.length;
  while (routeIndex) {
    routeIndex--;
    let route = routers[routeIndex];
    if (route.name === name) {
      return route;
    }
  }
  return routers[routers.length];
}

App.tsx配置

1.路由navigationRef对象获取传递

function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <SafeAreaProvider>
      <NavigationContainer ref={navigationRef}>
        <NavigatorFn navigationRef={navigationRef} />
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

2.MRouter初始化

useEffect(() => {
    MRouter.setNavigator(navigationRef);
    ...
  }, []);

3.路由动态生成

<RootStack.Navigator
        // initialRouteName="Root"
        // backBehavior="history"
        screenOptions={{
          headerShown: false,
          orientation: 'portrait'
        }}>
        {routers &&
          Object.keys(routers).map((key, index) => {
            return (
              <RootStack.Screen
                key={index}
                name={routers[key].name}
                options={routers[key].options}
                getComponent={() => routers[key].component}
              />
            );
          })}
 </RootStack.Navigator>

4.根据现有项目改造

useEffect(() => {
    AsyncStorage.getItem('token')
      .then(token => {
        dispatch(setToken({ token }));
        if (!token) {
          MRouter.home(routers.Login.name);
        }
      })
      .catch(err => {
        MRouter.home(routers.Login.name);
      });
  }, [token]);

  // if (isLoading) {
  //   return <></>;
  // }
  useEffect(() => {
    switch (status) {
      case 'login': // 进入登陆
        MRouter.home(routers.Login.name);
        break;
      default:
        MRouter.home(routers.Loading.name);
        break;
    }
  }, [status]);

MRouter使用补充说明

MRouter使用在任何页面和组件都可以直接使用，不用层层传递

MRouter提供了基本所有场景的使用方式

MRouter与原来navigation的navigate、replace等方法兼容，路由栈是同一个可以配合使用

MRouter使用说明

//MRouter打开新页面
//通过字符串Login
MRouter.open(‘Login’)   
//通过路由系统的name
MRouter.open(routers.Login.name)   
//通过第二参数传递params
MRouter.open(routers.Login.name, { name: 'abc', key: 1 })  
//通过第二参数传递params 通过第三参数确认是否开启新页面
//第三参数默认false,当前路由栈存在该页面时会自动跳转回存在的页面 设置为true，每次都开启新页面
MRouter.open(routers.Login.name, { name: 'abc', key: 1 }, true)  


//参数获取
//Component获取 直接从this.props中获取
const { params } = this.props;
const { name, key } = params;
//从hooks中获取
const route = useRoute();
const name = _.get(route, 'params.name', 'Demo Params');


//MRouter重置当前路由栈 并将页面为某个页面 同open可设置参数
MRouter.home(routers.Login.name)
MRouter.home(routers.Login.name, { key: 2, name: 'bcd' })


//MRouter替换路由栈顶的路由
MRouter.replace(routers.Login.name)
MRouter.replace(routers.Login.name, { key: 2, name: 'bcd' })


//MRouter关闭页面
//默认返回上一页
MRouter.back()
//返回路由名称为name的页面 可传递参数
//默认调用的是open方法 如果页面存在就返回到存在的页面 可传递参数
MRouter.back(routers.Login.name)
MRouter.back(routers.Login.name, { key: 2, name: 'bcd' })

部分代码示例

MRouter.ts

import { CommonActions } from '@react-navigation/native';
import errorHandler from './error/errorHandler';
import { routers } from 'router/router';
import { generateRandom } from 'utils';
import { NativeModules } from 'react-native';

let _navigator: any;

/**
 * 设置路由ref
 * @param navigatorRef 路由ref
 */
function setNavigator(navigatorRef: any) {
  _navigator = navigatorRef;
  logInfo('setNavigator');
}

/**
 * 将栈顶的路由替换为${name}路由
 * @param name 路由名称
 * @param params 路由参数
 */
function replace(name: string, params?: any) {
  let routers = _navigator.getRootState().routes || [];
  let index = indexOfRouteByName(name);
  if (name && index > -1) {
    let item = {
      index,
      name: name,
      path: name,
      params: params,
      key: name + generateRandom()
    };
    if (index > -1) routers = routers.slice(0, index);
    routers.push(item);
    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: routers
      })
    );
  } else {
    routers.pop();
    let item = {
      name: name,
      params: params,
      path: name,
      key: name + generateRandom()
    };
    routers.push(item);
    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: routers
      })
    );
  }
  logInfo('replace', name);
}

/**
 * 打开一个新页面
 * @param name 路由名称
 * @param params 路由参数
 * @param newPage 是否开启新页面 默认false
 */
function open(name: string, params?: object, newPage?: boolean) {
  let index = indexOfRouteByName(name);
  let route = getRouteInfoByName(name);
  let item: any = {
    key: route?.key || name,
    name: name,
    path: name,
    params: params || null
  };
  // console.log('newPage', newPage, index);
  if (newPage || index === -1) item.key = name + generateRandom();

  _navigator.dispatch(CommonActions.navigate(item));
  logInfo('open', name);
}

/**
 * 将路由name重置到首页 并且清空路由栈
 * @param name 路由名称
 * @param params 路由参数
 */
function home(name: string, params?: object) {
  try {
    let item = {
      name: name,
      path: name,
      params: params,
      key: name + generateRandom()
    };

    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [item]
      })
    );
  } catch (e) {
    errorHandler.noRoute(name);
  }
  logInfo('home', name);
}

/**
 * 路由回退
 * @param name 路由名称
 * @param params 回调参数
 */
function back(name?: string, params?: any) {
  let index = -1;
  let route = null;
  if (name) {
    index = indexOfRouteByName(name);
    route = getRouteInfoByName(name);
  } else {
    route = _navigator.getRootState().routes[_navigator.getRootState().routes.length - 1];
  }

  if (index > -1) {
    open(route.name, params || route.params);
  } else {
    close();
  }

  params &&
    _navigator.dispatch(
      CommonActions.setParams({
        params: params,
        key: route && route.key,
        source: route && route.key
      })
    );

  logInfo('back', name);
}

//顶部路由名称
function topPath() {
  return _navigator.getRootState().routes[0] || {};
}

//顶部路由名称
function isTopPath(name: string) {
  const topRoute = _navigator.getRootState().routes[0] || {};
  return topRoute.name === name;
}

/**
 * 关闭当前路由
 */
function close() {
  if (_navigator.canGoBack()) {
    _navigator.dispatch(CommonActions.goBack());
  }
  logInfo('close');
}

/**
 * 获取路由name在路由栈中当前的位置  从后往前查找
 * @param name 路由名称
 * @returns 返回index
 */
function indexOfRouteByName(name: string, isPrev?: boolean) {
  let routers = _navigator.getRootState().routes || [];
  let index = -1;
  if (isPrev) {
    return routers.findIndex((item: any) => item.name === name);
  } else {
    let routeIndex = routers.length;
    // console.log('indexOfRouteByName', name, routeIndex, routers);
    while (routeIndex > 0) {
      routeIndex--;
      let route = routers[routeIndex];
      if (route.name === name) {
        index = routeIndex;
        break;
      }
    }
  }

  return index;
}

/**
 * 根据页面名字获取页面所在路由的信息
 * @param  {String} name 页面名字
 * @return {{name,key,path,params}}      页面所在路由,如果没有则返回 null
 */
function getRouteInfoByName(name: string, isPrev?: boolean) {
  let routers = _navigator.getRootState().routes || [];
  let routeIndex = routers.length;
  if (isPrev) {
    return routers.find((item: any) => item.name === name);
  }
  while (routeIndex) {
    routeIndex--;
    let route = routers[routeIndex];
    if (route.name === name) {
      return route;
    }
  }
  return routers[routers.length];
}

/**
 * 获取当前的路由栈
 * @returns 返回路由栈
 */
function getRouters() {
  return _navigator?.getRootState()?.routes;
}
/**
 * 打开android app设置页面
 */
function openAppSetting() {
  return new Promise((resolve, reject) => {
    NativeModules.NativeRouter.openAppSetting();
  });
}

/**
 * 重新生成路由栈-只保留栈顶的路由和${name}路由
 * @param name 路由名称
 * @param params 路由参数
 */
function replaceOthers(name: string, params?: object) {
  let routers = _navigator.getRootState().routes || [];

  const newRouters = routers.slice(0, 1);
  try {
    let item = {
      name: name,
      path: name,
      params: params,
      key: name + generateRandom()
    };

    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [...newRouters, item]
      })
    );
  } catch (e) {
    errorHandler.noRoute(name);
  }
  logInfo('replaceOthers', name);
}
/**
 * 回到路由栈中的第一个，并关闭所有其他路由
 */
function popToTop() {
  let routers = _navigator.getRootState().routes || [];
  const newRouters = routers.slice(0, 1);
  try {
    _navigator.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [...newRouters]
      })
    );
  } catch (e) {
    errorHandler.noRoute('popToTop');
  }
  logInfo('popToTop');
}

const logInfo = (type:string, msg?:string) => {
  console.log('msg', type, msg)
}


export default {
  home,
  open,
  replace,
  back,
  close,
  setNavigator,
  topPath,
  getRouters,
  openAppSetting,
  isTopPath,
  replaceOthers,
  popToTop,
};

ErrorHandler.js

const noop = (e:Error,isFatal:Boolean) => { };

export const setJSExceptionHandler = (customHandler = noop, allowedInDevMode = false) => {
    if (typeof allowedInDevMode !== "boolean" || typeof customHandler !== "function") {
        return;
    }
    const allowed = allowedInDevMode ? true : !__DEV__;
    if (allowed) {
        // !!! 关键代码
        // 设置错误处理函数
        global.ErrorUtils.setGlobalHandler(customHandler);
        // 改写 console.error，保证报错能被 ErrorUtils 捕获并调用错误处理函数处理
        console.error = (message, error) => global.ErrorUtils.reportError(error);
    }
};

export const getJSExceptionHandler = () => global.ErrorUtils.getGlobalHandler();

export default {
    setJSExceptionHandler,
    getJSExceptionHandler,
};

generateRandom方法

export const generateRandom = () => {
  return Math.random().toString(16).slice(2);
};

router.tsx

import React from 'react';
import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
import Login from 'pages/login/index';
import HeaderBackArrow from 'components/HeaderBackArrow';
import { UITitleText } from 'components/Text/Texts';
import Loading from 'pages/loading';
import { GestureResponderEvent } from 'react-native-modal';
import MRouter from 'framework/MRouter';

//屏幕动画枚举
const animationType: any = {
  default: 'default',
  fade: 'fade',
  fade_from_bottom: 'fade_from_bottom',
  flip: 'flip',
  none: 'none',
  simple_push: 'simple_push',
  slide_from_bottom: 'slide_from_bottom',
  slide_from_right: 'slide_from_right',
  slide_from_left: 'slide_from_left'
};

//屏幕方向枚举
const orientationType = {
  default: 'default',
  all: 'all',
  portrait: 'portrait',
  portrait_up: 'portrait_up',
  portrait_down: 'portrait_down',
  landscape: 'landscape',
  landscape_left: 'landscape_left',
  landscape_right: 'landscape_right'
};

//屏幕默认config
// const screenConfig: NativeStackNavigationOptions = {
const screenConfig: any = {
  headerShown: true,
  headerShadowVisible: false,
  headerTitleAlign: 'center',
  headerBackTitle: '',
  headerBackVisible: false,
  headerBackTitleVisible: false,
  headerTintColor: '#3D3F43',
  animation: animationType.slide_from_right,
  orientation: orientationType.portrait,
  headerStyle: {
    backgroundColor: '#fff',
    // @ts-ignore
    borderBottomWidth: 0
  },
  headerTitleStyle: {
    fontSize: 18,
    fontWeight: '500',
    color: '#3D3F43'
  }
};
let tempTime = 0;
let clickNum = 0;
const onWelcome = (e: GestureResponderEvent) => {
  // console.log('onWelcome', e.timeStamp);
  const time = e.timeStamp;
  if (tempTime === 0) {
    tempTime = e.timeStamp;
  } else {
    if (time - tempTime > 300) {
      tempTime = time;
      clickNum = 0;
      return;
    }
    clickNum++;
    tempTime = time;

    if (clickNum === 11) {
      // Toast.info('连续点击8次，进入隐藏页面');
      // if (REACT_NATIVE_ENV !== 'PRODUCTION') {
      // }
      MRouter.open(routers.Login.name);
      clickNum = 0;
      tempTime = 0;
      return;
    }
  }
};

//路由option
const getOptions = (param: NativeStackNavigationOptions) => {
  const options: NativeStackNavigationOptions = {
    ...screenConfig,
    ...param,
    headerLeft: () => <HeaderBackArrow />,
    headerTitle: () => (
      <UITitleText onPress={onWelcome} suppressHighlighting={true}>
        {param.title || ''}
      </UITitleText>
    )
  };
  return options;
};

//在这里可以填写我们所需要的路由（页面） options可以配置我们对应的navigation配置
const routers = {
  Loading: { name: 'Loading', options: getOptions({ headerShown: false }), component: Loading },
  Login: { name: 'Login', options: getOptions({ title: '关于我们' }), component: Login },
};

//导出路由
export { routers };

App.tsx

// In App.js in a new project

import React, { useEffect} from 'react';
import { useAppSelector, useAppDispatch } from 'store/hook';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import MyStyleSheet from 'components/MyStyleSheet';
import MRouter from 'framework/MRouter';
import { routers } from 'router/router';

const RootStack = createNativeStackNavigator();

const NavigatorFn: React.FC<{ navigationRef: any }> = ({ navigationRef }) => {
  const dispatch = useAppDispatch();
  const { action, action_params } = useAppSelector(state => state.account);

  const openPage = (pageName: string) => {
    const params = action_params ? action_params : {};
    MRouter.home(pageName, params);
  };

  useEffect(() => {
    MRouter.setNavigator(navigationRef?.current);
  }, []);


  useEffect(() => {
    console.log('action', action);
    switch (action) {
      case 'login':
        openPage(routers.Tabbar.name);
        break;
      default:
        openPage(routers.Loading.name);
        // openPage(routers.Tabbar.name);
        break;
    }
  }, [action]);

  return (
    <>
      <RootStack.Navigator
        // initialRouteName="Root"
        // backBehavior="history"
        screenOptions={{
          headerShown: false,
          orientation: 'portrait'
        }}>
        {routers &&
          Object.keys(routers).map((key, index) => {
            return (
              <RootStack.Screen
                key={index}
                name={routers[key].name}
                options={routers[key].options}
                getComponent={() => routers[key].component}
              />
            );
          })}
      </RootStack.Navigator>
    </>
  );
};

function App() {
  const navigationRef = useNavigationContainerRef();
  const dispatch = useAppDispatch();

  return (
    <SafeAreaProvider>
      <NavigationContainer
        ref={navigationRef}
        onStateChange={state => {
          // 全局路由埋点
          // if (state) {
          //   const { routes } = state;
          //   if (routes?.length > 0) {
          //     let data: any = {};
          //     if (routes.length > 1) {
          //       const { name = '', key = '' } = routes[1];
          //       const { name: preName = '', key: preKey = '' } = routes[0];
          //       data.page_from = preName;
          //       data.page = name;
          //       data.page_from_key = preKey;
          //       data.page_to = name;
          //       data.page_to_key = key;
          //     } else {
          //       const { name, key } = routes[0];
          //       data.page_to = name;
          //       data.page_key_to = key;
          //     }
          //     TrackEventManager.trackEvent(TrackEventEnum.page_jump, {
          //       ...data,
          //       event: TrackEventEnum.page_jump,
          //       event_desc: '页面跳转',
          //       page: '页面'
          //     });
          //   }
          // }
        }}>
        <NavigatorFn navigationRef={navigationRef} />
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

const styles = MyStyleSheet.create({
  header: {
    height: 28,
    marginBottom: 8,
    // backgroundColor: '#f00',
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '500'
  },
});

export default App;

结束语

懂的都懂