如何在本机反应中从 Stack.Screen 在 OnPress 上打开抽屉答案

【问题标题】：How to Open Drawer On OnPress from Stack.Screen in react native如何在本机反应中从 Stack.Screen 在 OnPress 上打开抽屉
【发布时间】：2021-05-25 11:00:01
【问题描述】：

我正在尝试从主屏幕打开抽屉。当我向右滑动时抽屉正在打开，但是。我想打开 Draer onPress of menu Icon。但它不起作用。我使用了 openDrawer、toggleDrawer 但没有任何效果。

这是我的代码


function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="homeScreen">
      <Drawer.Screen name="homeSreen" component={homeScreen} 
      
      options={{
        headerLeft: () => <Icon
            name="menu"
            size={25}
            color="#D4AF37"
            onPress={() => navigation.toggleDrawer()}
          />
  }} 
      />
    </Drawer.Navigator>
  );
}

function App({ navigation }) {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="splashScreen" component={splashScreen} options={{headerShown: false}} />
        <Stack.Screen name="loginScreen" component={loginScreen}  options={{headerShown: false}} />
        <Stack.Screen name="homeScreen" component={MyDrawer}  />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

【问题讨论】：

标签： javascript react-native navigation-drawer

【解决方案1】：

在反应导航 V5 中

navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());

【讨论】：

不，它不工作我认为我在导航中做错了什么
您使用的是哪个版本的导航？
5 版本我用的是 5
这里是完整的文档reactnative.dev/docs/navigation

【解决方案2】：

尝试在函数 MyDrawer() 中添加导航

喜欢这个function MyDrawer({navigation}) {...}

【讨论】：

【解决方案3】：

您可以使用this.props.navigation.openDrawer()打开抽屉

                 <TouchableOpacity
                    onPress={() => {
                      this.props.navigation.openDrawer();
                    }}>
                    <Icon name="bars" size={21} color="rgb(112, 112, 112)" />
                  </TouchableOpacity>

【讨论】：