时间戳

首页 > 解决方案 > 如何在 React Navigation 5 中调用 toggleDrawer

react-native - 如何在 React Navigation 5 中调用 toggleDrawer

问题描述

我有一个使用手势工作的 React-Navigation 5 抽屉菜单，但我还想在标题的右侧添加一个图标来切换抽屉菜单。

我的 App.js 中有这样的导航设置：

import {NavigationContainer, DrawerActions} from '@react-navigation/native';
//....... other imports

const HomeStack = createStackNavigator();
const HomeStackScreens = () => (
  <HomeStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#5C6BC0',
      },
      headerTintColor: '#fff',
      headerRight: () => {
        return (
          <TouchableOpacity
            onPress={() => DrawerActions.toggleDrawer()}>
            <Icon name="bars" color="#FFF" size={18} />
          </TouchableOpacity>
        );
      },
    }}>
    <HomeStack.Screen 
      name="Home"
      component={HomeScreen}
      options={{
        header:({scene, previous, navigation}) => {
          return (
            <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
               <Icon name="bars" color="#FFF" size={18} />
            </TouchableOpacity>
          );
        }
      }}
    />
    <HomeStack.Screen name="Login" component={Login} />
    <HomeStack.Screen name="Register" component={Register} />
  </HomeStack.Navigator>
 );

 const ProfileStack = createStackNavigator();
 const ProfileStackScreens = () => (
   <ProfileStack.Navigator>
     <ProfileStack.Screen name="Profile" component={Profile} />
   </ProfileStack.Navigator>
 );

 const SettingStack = createStackNavigator();
 const SettingStackScreens = () => (
   <SettingStack.Navigator>
     <SettingStack.Screen name="Profile" component={Profile} />
   </SettingStack.Navigator>
 );

 const Drawer = createDrawerNavigator();
 const DrawerScreens = () => (
   <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStackScreens} />
      <Drawer.Screen name="Profile" component={ProfileStackScreens} />
      <Drawer.Screen name="Settings" component={SetttingStackScreens} />
   </Drawer.Navigator>
 );

 class MyApp extends React.Component {
   render() {
     return (
       <NavigationContainer>
         <DrawerScreens />
       </NavigationContainer>
     );
   }
 }

 export default MyApp;

我所有的其他屏幕都采用“导出默认类 ScreenName 扩展 React.Component”的形式。它们被导入 App.js 以设置导航。初始屏幕是主页。该图标正确显示在标题的右侧。直接调用“DrawerActions.toggleDrawer()”什么也不做。

我尝试了“this.props.navigation.toggleDrawer()”，但由于“this.props”未定义而引发错误。

如何使用这样的导航设置调用 toggleDrawer()？非常感谢任何帮助！

标签： react-nativenavigation-drawerreact-navigationreact-navigation-drawer

解决方案

这是我提出的最终解决方案，它需要对我的原始代码进行最少的更改。关键是在 screenOptions 或 options 中接收“导航”，然后我可以在 screenOptions/options 的子项中调用导航方法。

<HomeStack.Navigator
  screenOptions={({navigation}) => ({
  headerStyle: {
    backgroundColor: '#5C6BC0',
  },
  headerTintColor: '#fff',
  headerRight: () => {
    return (
      <TouchableOpacity
        style={{paddingRight: 8}}
        onPress={() => navigation.toggleDrawer()}>
        <Icon name="bars" color="#FFF" size={18} />
      </TouchableOpacity>
    );
  },
})}>

推荐阅读