React Native应用中条件渲染MyNav组件的实现方案（避免状态重置）

开发者阿泽

2026-7-26

解决方案

可以按你现有结构实现MyNav的条件渲染，核心思路是监听当前路由名称，根据路由判断是否渲染组件，同时解决你之前遇到的重渲染和状态重置问题：

步骤1：修复路由名称重复问题

你原代码里两个Stack.Screen的name都是nav1，这会导致导航逻辑混乱，先把第二个改成唯一名称，比如nav2：

<Stack.Screen name="nav2" component={NavScreen2} />

步骤2：监听当前路由并条件渲染

在App组件中，通过React Navigation提供的useNavigationState钩子获取当前路由名称，然后判断是否渲染MyNav：

修改后的完整代码：

import { NavigationContainer, useNavigationState } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import NoNavScreen from "somewhere";
import NavScreen1 from "somewhere"
import NavScreen2 from "somewhere";
import MyNav from "somewhere";

const Stack = createNativeStackNavigator();

const App = () => { 
  // 获取当前活跃的路由名称
  const currentRouteName = useNavigationState(state => state.routes[state.index]?.name);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="nonav" component={NoNavScreen} />
        <Stack.Screen name="nav1" component={NavScreen1} />
        <Stack.Screen name="nav2" component={NavScreen2} />
      </Stack.Navigator>

      {/* 仅当当前路由不是nonav时渲染MyNav */}
      {currentRouteName !== "nonav" && <MyNav />}
    </NavigationContainer>
  );
};

export default App;

方案优势说明

MyNav挂载在App组件层级，切换nav1和nav2时，因为currentRouteName始终不等于nonav，组件不会卸载/重渲染，状态得以保留，解决了你之前遇到的状态重置问题。
通过useNavigationState直接从导航状态中获取当前路由，无需额外监听，逻辑简洁高效。
如果MyNav需要和导航交互（比如触发页面跳转），直接在MyNav中使用useNavigation钩子获取导航实例即可，不影响原有功能。