React Native报错：TypeError: undefined is not an object(navigation.toggleDrawer)

我看了你遇到的问题——点击抽屉按钮时触发TypeError: undefined is not an object (evaluating 'navigation.toggleDrawer')，根源是你自定义的toDrawerButton写法有误，导致无法正确获取到navigation对象。

问题出在哪？ #

你原来的toDrawerButton定义搞错了参数解构的逻辑：

const toDrawerButton = ({ headerLeft: ({navigation}) => (<Button icon = {<Icon name='menu' size={24} color='black' onPress={() => navigation.toggleDrawer()}/>} />)});

这里你试图直接解构headerLeft，但实际上options应该是一个返回配置对象的函数，这个函数的参数会包含navigation，我们需要从这个参数里拿到navigation，再定义headerLeft组件。

修正方案 #

把toDrawerButton改成正确的写法，让它返回包含headerLeft的配置对象，并且正确接收navigation参数：

const toDrawerButton = ({ navigation }) => ({
  headerLeft: () => (
    <Button
      icon={<Icon name='menu' size={24} color='black' />}
      onPress={() => navigation.toggleDrawer()}
      type="clear" // 加上这个可以去掉按钮默认的背景，更像一个纯图标按钮
    />
  )
});

然后你的MenuNavigator.Screen使用这个配置就没问题了：

<MenuNavigator.Screen name = "Menu" component={Menu} options={toDrawerButton}/>

另一种更直接的写法 #

如果你不想单独定义toDrawerButton，也可以直接在options里写匿名函数，逻辑更清晰：

<MenuNavigator.Screen 
  name="Menu" 
  component={Menu} 
  options={({ navigation }) => ({
    headerLeft: () => (
      <Button
        icon={<Icon name='menu' size={24} color='black' />}
        onPress={() => navigation.toggleDrawer()}
        type="clear"
      />
    )
  })}
/>

额外说明 #

你的代码里把NavigationContainer放在了DrawerNavigatorScreens里是正确的，整个导航结构只需要一个NavigationContainer包裹，这样内部的屏幕才能正确获取到navigation上下文。

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