如何使用图标组件在左侧标题中切换抽屉答案

【问题标题】：How can i use the Icon component to toggle drawer in header left如何使用图标组件在左侧标题中切换抽屉
【发布时间】：2021-05-22 14:24:32
【问题描述】：

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()。问题是我不知道如何在每个堆栈导航器中获得导航道具。我很乐意接受任何建议。 ..................................................... ......................................

【问题讨论】：

标签： react-native react-navigation navigation-drawer

【解决方案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>

【讨论】：