React Native Expo抽屉导航报错：navigation.navigate未定义

错误原因 #

你的CustomDrawer组件参数写法错误，navigation并不是独立的第二个参数，而是包含在传入的props对象中；另外虽已导入useNavigation钩子，但未实际使用。

修复方案 #

方案1：从props中解构navigation #

修改CustomDrawer的组件定义，直接从props里解构出navigation：

// CustomDrawer.js
import { View, Text } from 'react-native'
import React, { useState } from 'react'

import {
    DrawerContentScrollView,
    DrawerItem,
    DrawerItemList
} from '@react-navigation/drawer'
import { Colors, Hr, Icon, ProfilePic } from './styles'

//icons
import { Feather, FontAwesome } from "@expo/vector-icons"
import Profile from '../screens/Profile'
import { useNavigation } from '@react-navigation/native';

//colors
const { gray, secondary } = Colors;

// 从props中解构navigation
const CustomDrawer = ({ navigation, ...props }) => {

    const [collapsed, setCollapsed] = useState(false);


    return (
        <DrawerContentScrollView {...props}>
            <Icon>
                <ProfilePic
                    drawer={true}
                    resizeMode='cover'
                    source={require('./../assets/img/default.png')}
                />
            </Icon>
            <Hr drawer={true} />
            <View>
                <DrawerItem
                    icon={({ color, size, focused }) => (
                        <FontAwesome
                            name='lock'
                            size={20}
                            color={!collapsed ? color : secondary}
                        />
                    )}
                    label={({ focused, color }) =>
                        <View
                            style={{ marginLeft: -25, flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
                            {!collapsed ?
                                (<>
                                    <Text style={{ fontSize: 17, color, marginHorizontal: 20, }}>
                                        Profile
                                    </Text>
                                    <Feather
                                        name='chevron-down'
                                        size={20}
                                        style={{
                                            marginLeft: 20
                                        }}
                                    />
                                </>
                                ) : (<>
                                    <Text style={{ fontSize: 17, color: secondary, marginHorizontal: 20, }}>
                                        Profile
                                    </Text>
                                    <Feather
                                        name='chevron-up'
                                        size={20}
                                        style={{
                                            color,
                                            marginLeft: 20
                                        }}
                                    />
                                </>
                                )
                            }
                        </View>
                    }
                    onPress={() => { setCollapsed(!collapsed) }}
                />
                {collapsed ?
                    (<DrawerItem
                        icon={({ color, size, focused }) => (
                            <Feather name='list' size={20} color={color} style={{ marginLeft: 30 }} />
                        )}
                        label={({ focused, color }) => <Text style={{ fontSize: 17, color, marginLeft: -20 }}>My Profile</Text>}
                        onPress={() => { navigation.navigate('Home') }}
                    />) :
                    null
                }
                <DrawerItemList {...props} />
            </View>
        </DrawerContentScrollView>
    )
}

export default CustomDrawer

方案2：使用useNavigation钩子 #

既然已导入useNavigation，可直接在组件内部获取navigation对象，无需从props解构：

// CustomDrawer.js
// ... 其他导入代码不变

const CustomDrawer = (props) => {
    const navigation = useNavigation(); // 调用钩子获取navigation
    const [collapsed, setCollapsed] = useState(false);

    // 剩余代码与方案1一致
}

额外优化点 #

• 简化状态切换逻辑：用onPress={() => setCollapsed(!collapsed)}替代原三元判断
• 用null替代空字符串作为条件渲染默认值，符合React组件规范

内容的提问来源于stack exchange，提问作者Osas nathaniel