如何基于Expo-Router Drawer实现自定义抽屉？解决路由报错

问题场景 #

使用Expo Router的Drawer组件时，想在抽屉里展示用户头像、名称和导航项，但编写自定义抽屉内容组件后出现报错：couldn't find parent navigation with route 'screen1'。

错误原因 #

1. Drawer.Screen是用于在<Drawer>组件内部注册路由的元素，不能放在自定义的drawerContent组件中。
2. 自定义抽屉内容里的导航项需要用DrawerItem组件实现，而非Drawer.Screen。
3. 组件props传递存在冗余错误，CustomDrawerContent无需单独接收props参数，应直接解构所需属性。

修正后的代码 #

1. 正确的CustomDrawerContent组件 #

import { ScrollView, View, Image, Text } from 'react-native';
import { DrawerItem } from '@react-navigation/drawer';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';

function CustomDrawerContent({ navigation }) {
  const insets = useSafeAreaInsets();
  const router = useRouter();

  return (
    <ScrollView style={{ flex: 1, paddingTop: insets.top }}>
      {/* 用户信息区域 */}
      <View
        style={{
          height: 200,
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          borderBottomColor: '#f4f4f4',
          borderBottomWidth: 1,
        }}
      >
        <Image
          source={require('../../assets/icon.png')}
          style={{
            height: 90,
            width: 90,
            borderRadius: 65,
          }}
        />
        <Text style={{ marginTop: 8, fontSize: 16, fontWeight: '500' }}>
          Jacob
        </Text>
        <Text style={{ marginTop: 4, fontSize: 14, color: '#666' }}>
          Product Manager
        </Text>
      </View>

      {/* 导航抽屉项 */}
      <DrawerItem
        label="Screen 1"
        onPress={() => router.push('/screen1')}
      />
      <DrawerItem
        label="Screen 2"
        onPress={() => router.push('/screen2')}
      />
    </ScrollView>
  );
}

2. 正确的Layout组件 #

import { Drawer } from 'expo-router/drawer';
import CustomDrawerContent from './path-to-your-custom-drawer'; // 替换为实际文件路径

export default function Layout() {
  return (
    <Drawer
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      screenOptions={{ headerShown: false }}
    >
      {/* 必须在此处注册Drawer的路由屏幕 */}
      <Drawer.Screen name="screen1" />
      <Drawer.Screen name="screen2" />
    </Drawer>
  );
}

关键说明 #

• Drawer.Screen必须放在<Drawer>组件的直接子级位置，用于注册路由信息。
• 自定义抽屉内容里的交互项使用DrawerItem，通过onPress结合router.push实现页面跳转。
• 借助useSafeAreaInsets处理安全区域，避免内容被状态栏等系统元素遮挡。

内容的提问来源于stack exchange，提问作者Shuvo Rahman