我需要在 React Native 中为 Drawertoggling 添加一个图标

Question

I got the following error while trying to do so.I am using React Navigation 5 It is showing Object is not a function

Here is my code

 const HeaderLeft = ({ navigation }) => { return ( <View style={{flexDirection: 'row'}}> <Icon name="menu" size={24} color= 'white' onPress={ () => navigation.toggleDrawer() } /> </View> );}

This is how I added it in screen

 <MenuNavigator.Navigator initialRouteName='Menu' screenOptions={{ headerStyle: { backgroundColor: "#512DA8" }, headerTintColor: "#fff", headerLeft: ({ navigation }) => (<HeaderLeft navigation={navigation} />), headerTitleStyle: { color: "#fff" }, }} >

Please Help me on the above Bug

Answer 1

You are getting the navigation from the wrong place. It should be

 screenOptions = {
      (navigation) => ({
          headerStyle: {
            backgroundColor: "#512DA8"
          },
          headerTintColor: "#fff",
          headerLeft: () => ( < HeaderLeft navigation = {
                navigation
              }
              />),
              headerTitleStyle: {
                color: "#fff"
              }})}

The navigation you are passing in would probably would be null