React native 如何使用图标组件切换标题左侧的抽屉

App.js

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

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;

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 }

函数应用程序（）{
返回（//带堆栈顺序的导航容器
);
}

DrawerNavigator.js

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

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;

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 }

const Drawer=createDrawerNavigator（）；
常数抽屉驱动=（）=>{
返回(
}>
);
};
导出默认付款人激活器；

StackNavigator.js

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

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;

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 }

const Stack=createStackNavigator（）；
const AuthStackNavigator=（）=>{
返回(
(
)
}}/>
(
)
}}/>
)
}
常量ResetStackNavigator=（）=>{
返回(
(
)
}} />
)
}
常量MainStackNavigator=（）=>{
返回(
(
)//设置标题
}}/>
(
)//集头山雀
}}/>
(
)
}} />
(
)
}} />
);
}
导出{MainStackNavigator，AuthStackNavigator，ResetStackNavigator}

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

---

您可以使用

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>

从'@react-navigation/native'导入{useNavigation}；
常量MainStackNavigator=（）=>{
const navigation=useNavigation（）；
返回(
(
navigation.toggleDrawer（）}
name='ei-navicon'
type='evillicon'
颜色='#517fa4'
/>
)//设置标题
}}/>
(
)//集头山雀
}}/>
(
)
}} />
(
)
}} />