React Native中如何为自定义DrawerItem组件传递Props并正确使用ScreenName参数？

我来帮你梳理下问题所在，你的自定义抽屉组件有几个小细节需要调整，咱们一步步来修正：

1. 缺失Navigation Props传递 #

你的AppDrawerItem组件里要调用navigation.navigate，但你并没有把navigation作为props传递给它，而且组件参数里也没声明这个props，这会直接导致报错。

2. 导航调用的语法错误 #

你写的props.navigation.navigate[ScreenName]是错误的写法——navigate是一个方法，应该用括号调用，传入目标屏幕名称作为参数，而不是用方括号。

修正后的完整代码 #

自定义AppDrawerItem组件 #

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
// 请确保你已经导入了项目中的colors配置对象

function AppDrawerItem({ label, ScreenName, icon, color = "medium", navigation }) {
  return (
    <DrawerItem
      icon={({ color: iconColor, size }) => (
        // 这里把回调参数的color重命名为iconColor，避免和自定义的color prop混淆
        <MaterialCommunityIcons 
          name={icon} 
          size={30} 
          color={colors[color]} 
        />
      )}
      label={label}
      onPress={() => {
        // 修正导航调用方式：使用括号调用navigate方法，传入ScreenName
        navigation.navigate(ScreenName);
      }}
    />
  );
}

export default AppDrawerItem;

调用自定义组件的代码 #

<DrawerContentScrollView {...props}>
  <Drawer.Section style={styles.mainSection}>
    {/* 新增navigation props传递，从父组件的props中获取 */}
    <AppDrawerItem 
      label="Home" 
      ScreenName="HomeScreen" 
      icon="home-outline"
      navigation={props.navigation} 
    />
    {/* 其他抽屉项也可以用同样方式调用 */}
    {/* <AppDrawerItem 
      label="Profile" 
      ScreenName="ProfileScreen" 
      icon="account-outline"
      navigation={props.navigation} 
    /> */}
  </Drawer.Section>
</DrawerContentScrollView>

额外优化小技巧 #

如果你觉得每次手动传递navigation props太麻烦，可以改用useNavigation钩子，在组件内部直接获取导航对象：

// 在AppDrawerItem组件中使用useNavigation
import { useNavigation } from '@react-navigation/native';

function AppDrawerItem({ label, ScreenName, icon, color = "medium" }) {
  const navigation = useNavigation(); // 直接获取navigation对象
  return (
    // 剩余代码和之前一致
  );
}

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