React Navigation v6 抽屉与Stack导航嵌套问题及结构合理性咨询

结构合理性说明 #

你当前采用的「抽屉导航嵌套Stack导航」的结构是符合需求的，不需要调整嵌套顺序。如果反过来把抽屉嵌套在Stack内，只有对应Stack页面才能呼出抽屉，无法满足所有页面都支持抽屉操作的要求。你遇到的三个问题都是代码实现错误导致的，修复方案如下： #

问题1：抽屉无法识别当前焦点页面 #

原因 #

你的抽屉导航下只挂载了一个MainStack路由，抽屉默认只能感知到MainStack是活跃路由，无法感知MainStack内部的子路由状态。同时你的CustomDrawerContent没有主动获取Stack内部的活跃路由做匹配。

修复方案 #

在CustomDrawerContent中获取MainStack的当前活跃路由，绑定到Drawer.Item的active属性：

const CustomDrawerContent: React.FC<DrawerContentComponentProps<MainDrawerParamList>> = props => {
  // 获取MainStack的内部导航状态
  const mainStackState = props.state.routes[props.state.index].state;
  const currentRouteName = mainStackState?.routes[mainStackState.index]?.name;

  return (
    <DrawerContentScrollView>
      <Drawer.Item 
        label="Home" 
        onPress={() => props.navigation.navigate('MainStack', {screen: 'HomeScreen'})} 
        icon="star"
        active={currentRouteName === 'HomeScreen'}
      />
      <Drawer.Item 
        label="OverView" 
        onPress={() => props.navigation.navigate('MainStack', {screen: 'OverViewScreen'})} 
        icon="star"
        active={currentRouteName === 'OverViewScreen'}
      />
      {/* 其余抽屉项同理 */}
    </DrawerContentScrollView>
  );
};

同时修正导航跳转的写法，嵌套路由跳转需要指定父路由名+子路由名，避免跳转逻辑异常。 #

问题2：导航Prop无自动补全提示 #

原因 #

你只定义了复合导航类型，没有按照React Navigation的要求做全局类型注册，IDE无法识别全局的导航参数列表。

修复方案 #

在你的类型定义文件中添加全局类型注册代码：

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

export type MainStackParamList = {
  HomeScreen: undefined;
  OverViewScreen: undefined;
  WorkOrdersScreen: {id?: number; description?: string; tabIndex?: number};
  PropertiesScreen: undefined;
  PropertyDetailScreen: {propertyUnit: PropertyUnit};
};

export type MainDrawerParamList = {
  MainStack: NavigatorScreenParams<MainStackParamList>;
};

// 全局注册导航类型
declare global {
  namespace ReactNavigation {
    interface RootParamList extends MainDrawerParamList {}
  }
}

// 页面内使用导航Props时直接用内置类型即可，不需要每次定义复合类型
export type AppScreenProps<T extends keyof MainStackParamList> = CompositeScreenProps<
  StackScreenProps<MainStackParamList, T>,
  DrawerScreenProps<MainDrawerParamList>
>;

配置完成后，调用navigation.navigate时会自动提示所有合法路由名，包括嵌套的Stack子路由。 #

问题3：Android端性能明显下降 #

原因 #

你的代码存在两处严重的不必要重渲染问题：

1. MainStackScreens组件写法错误，你把navigation当成了入参直接传入，每次导航状态变化都会导致整个Stack导航器重渲染
2. MainStackScreenOptions提前传入navigation实例，headerLeft每次渲染都会生成新的组件实例，导致头部频繁重渲染

修复方案 #

修正导航组件的写法：

// 修正MainStackScreens的写法，路由组件的props由导航器自动注入
const MainStackScreens = () => {
  return (
    <MainStack.Navigator 
      initialRouteName={'HomeScreen'} 
      // screenOptions传入回调函数，由导航器自动注入props
      screenOptions={({navigation}) => ({
        headerStyle: {backgroundColor: '#00aade'},
        headerTintColor: '#fca903',
        headerTitleAlign: 'center',
        headerTitleStyle: {fontWeight: 'bold', fontStyle: 'italic'},
        headerBackTitle: 'GoBack',
        headerLeft: () => <IconButton icon="menu" color="white" onPress={() => navigation.openDrawer()} />
      })}
    >
      <MainStack.Screen name="HomeScreen" component={HomeScreen} />
      <MainStack.Screen name="OverViewScreen" component={OverViewScreen} />
      <MainStack.Screen name="WorkOrdersScreen" component={WorkOrdersScreen} />
      <MainStack.Screen name="PropertiesScreen" component={PropertiesScreen} />
      <MainStack.Screen name="PropertyDetailScreen" component={PropertyDetailScreen} />
    </MainStack.Navigator>
  );
};

const Navigation: React.FC = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="MainStack"
        screenOptions={{headerShown: false}}
        drawerContent={props => <CustomDrawerContent {...props} />}
        // Android可选优化：降低抽屉动画复杂度
        drawerType="slide"
        overlayColor="#00000070"
      >
        <Drawer.Screen name="MainStack" component={MainStackScreens} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

如果仍然存在卡顿，检查是否已正确配置react-native-reanimated的Babel插件，这是Drawer导航在Android端流畅运行的必要依赖。 #

内容的提问来源于stack exchange，提问作者Amir-Mousavi