我如何使用图标组件在 header 左侧切换抽屉

Question

App.js

function App() {
  return (// Navigation container with stack order
  <Provider store={store}>
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  </Provider>
  );
}

DrawerNavigator.js

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: {marginVertical: 5},
        }}
        drawerContent={(props) => <CustomSidebarMenu {...props} />}>
        <Drawer.Screen
          name="Authentication"
          options={{drawerLabel: 'Authentication'}}
          component={AuthStackNavigator}
        />
        <Drawer.Screen
          name="Symptom Checker
          "
          options={{drawerLabel: 'Symptom Checker'}}
          component={MainStackNavigator}
        />
        <Drawer.Screen
          name="Reset Password
          "
          options={{drawerLabel: 'Reset Password'}}
          component={ResetStackNavigator}
        />
      </Drawer.Navigator>
    
  );
};

export default DrawerNavigator;

StackNavigator.js

const Stack = createStackNavigator();
const AuthStackNavigator=() => {
    return(
        <Stack.Navigator initialRouteName='Authentication'>
          <Stack.Screen name="Login" component={Login} options={{
          headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )
        }}/>
          <Stack.Screen name="SignUp" component={Signup} options={{
          headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )
        }}/>

        </Stack.Navigator>
    )
}
const ResetStackNavigator=() => {
  return(
      <Stack.Navigator initialRouteName='Authentication'>
        <Stack.Screen name="Reset Password" component={Reset_Password}  options={{
          headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )
        }} />
      </Stack.Navigator>
  )
}
const MainStackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="SymptomChecker">
        <Stack.Screen name="Symptom" component={Page1} options={{
          title: 'Search Symptoms',headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          ) //Set Header Title
        }}/>
        <Stack.Screen name='Diagnosis' component={Page2} options={{
          title: 'Diagnosis', headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )//Set Header Tit
        }}/>
        <Stack.Screen name='Disease Component' component={DiseaseComponent} options={{
          headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )
        }} />
        <Stack.Screen name='Summary' component={Summary} options={{
          headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )
        }} />
      </Stack.Navigator>
  );
}

export { MainStackNavigator, AuthStackNavigator, ResetStackNavigator }

我知道切换抽屉我将使用 navigation.toggleDrawer()。问题是我不知道如何在我的每个堆栈导航器中获得导航道具。我很乐意接受任何建议。 ..................................................... .....................................

Answer 1

您可以使用 useNavigation:

import { useNavigation } from '@react-navigation/native';
    
const MainStackNavigator = () => {
const navigation = useNavigation();
  return (
    <Stack.Navigator initialRouteName="SymptomChecker">
        <Stack.Screen name="Symptom" component={Page1} options={{
          title: 'Search Symptoms',headerLeft: () => (
            <Icon
              onPress={()=>navigation.toggleDrawer()} 
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          ) //Set Header Title
        }}/>
        <Stack.Screen name='Diagnosis' component={Page2} options={{
          title: 'Diagnosis', headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )//Set Header Tit
        }}/>
        <Stack.Screen name='Disease Component' component={DiseaseComponent} options={{
          headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )
        }} />
        <Stack.Screen name='Summary' component={Summary} options={{
          headerLeft: () => (
            <Icon
              name='ei-navicon'
              type='evilicon'
              color='#517fa4'
            />
          )
        }} />
      </Stack.Navigator>

我如何使用图标组件在 header 左侧切换抽屉

How can i use the Icon component to toggle drawer in header left

navigation-drawer

react-native

react-navigation