React Native按需渲染Header和Footer的实现及错误解决

问题背景 #

开发React Native应用时，需要仅在部分页面显示Header和Footer，其余页面隐藏。登录状态下原本全局渲染Header、AppStack和FooterNavBar，但尝试用useRoute判断当前路由来按需渲染时，出现错误：

Error: Couldn't find a route object. Is your component inside a screen in a navigator?

原路由代码 #

export default function Router() {
  const {isLoggedIn, isLogoutPressed} = useContext(AppContext);

  return (
    <NavigationContainer>
      {isLoggedIn ? (
        <>
          <Header />
          <AppStack />
          <FooterNavBar />
          {isLogoutPressed && <LogoutModal />}
        </>
      ) : (
        <AuthStack />
      )}
    </NavigationContainer>
  );
}

错误的修改尝试 #

export default function Router() {
  const {isLoggedIn, isLogoutPressed} = useContext(AppContext);
  const route = useRoute();

  const shouldRenderHeader = () => {
    const allowedScreens = ['HomeScreen', 'ProfileScreen', 'Profile'];
    return allowedScreens.includes(route.name);
  };

  return (
    <NavigationContainer>
      {isLoggedIn ? (
        <>
          <Header />
          {shouldRenderHeader(route) && <Header />}
          <AppStack />
          <FooterNavBar />
          {isLogoutPressed && <LogoutModal />}
        </>
      ) : (
        <AuthStack />
      )}
    </NavigationContainer>
  );
}

错误原因 #

useRoute钩子只能在导航器内部的屏幕组件（即被navigator.screen渲染的组件）中调用，而你的Router组件是NavigationContainer的父级/同级组件，不在导航器的路由上下文范围内，因此无法获取到路由对象，从而抛出错误。

解决方案 #

使用useNavigationState钩子获取当前导航状态，以此判断当前活跃的路由名称，实现Header和Footer的按需渲染：

import { useNavigationState } from '@react-navigation/native';

export default function Router() {
  const { isLoggedIn, isLogoutPressed } = useContext(AppContext);
  // 获取当前活跃路由的名称
  const currentRouteName = useNavigationState(state => state.routes[state.index]?.name);

  const shouldRenderHeader = () => {
    const allowedScreens = ['HomeScreen', 'ProfileScreen', 'Profile'];
    return allowedScreens.includes(currentRouteName);
  };

  const shouldRenderFooter = () => {
    // 根据需求定义需要显示Footer的页面
    const allowedFooterScreens = ['HomeScreen', 'ProfileScreen'];
    return allowedFooterScreens.includes(currentRouteName);
  };

  return (
    <NavigationContainer>
      {isLoggedIn ? (
        <>
          {shouldRenderHeader() && <Header />}
          <AppStack />
          {shouldRenderFooter() && <FooterNavBar />}
          {isLogoutPressed && <LogoutModal />}
        </>
      ) : (
        <AuthStack />
      )}
    </NavigationContainer>
  );
}

说明 #

• useNavigationState可以在NavigationContainer内部的任何组件中使用，它返回当前的导航状态对象，通过state.routes[state.index]可以获取到当前活跃的路由信息。
• 分别定义shouldRenderHeader和shouldRenderFooter函数，根据当前路由名称判断是否需要渲染对应的组件。
• 移除了错误代码中重复渲染的<Header />，避免不必要的组件渲染。

内容的提问来源于stack exchange，提问作者Harish Redyshetty