React Native Navigation Drawer 问题（'navigation.openDrawer' 未定义））

Question

大家好，我是反应原生的新手。我想使用带有菜单按钮的抽屉导航。但实际上我可能不太了解反应导航。当我按下 openDrawer 的按钮时，我收到这样的错误；

TypeError：navigation.openDrawer 不是函数。 （在'navigation.openDrawer()'中，'navigation.openDrawer'是未定义的）

这是我的零食示例； https://snack.expo.io/@vubes/drawer-check

这是我的代码的有用部分。也许你能理解我的问题。 提前感谢任何可以提供帮助的人。

function DovizStack({navigation}) {

  return (
    <Stack.Navigator
      initialRouteName="Döviz"
      screenOptions={{
        headerStyle: { backgroundColor: "#1D1D1D" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
      }}
    >
      <Stack.Screen
        name="Doviz"
        component={Doviz}
        options={{
          title: "Döviz",
          headerTitleAlign: "center",
          headerLeft: () => (<TouchableOpacity style={{paddingLeft:20}} onPress={()=> navigation.openDrawer()}>
          <MaterialCommunityIcons name="menu" color={"white"} size={20} />
             </TouchableOpacity>),
        }}
      />
      <Stack.Screen
        name="dovizBuyDetails"
        component={dovizBuyDetails}
        options={{ title: "Alış", headerTitleAlign: "center" }}
      />
      <Stack.Screen
        name="dovizSellDetails"
        component={dovizSellDetails}
        options={{ title: "Satış", headerTitleAlign: "center" }}
      />
      
    </Stack.Navigator>
  );
}

我有 5 个这样的堆栈。之后是 myTab。

抽屉栈;

function DrawerStack() {
  return(
      <Drawer.Navigator initialRouteName="Menu" drawerPosition= "right" >
      <Drawer.Screen name="stack" component={stack} />
        <Drawer.Screen name="Doviz" component={DovizStack}/>
        <Drawer.Screen name="Altın" component={AltinStack} />
      </Drawer.Navigator>

  )
}

和默认堆栈；

export default function stack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name="Giriş"
          component={LandingStack}
        />   
         <Stack.Screen
          options={{ headerShown: false }}
          name="drawer"
          component={myTab}
        />
      
      </Stack.Navigator>
      </NavigationContainer>


  );
  
}

实际上我可以使用登录屏幕（登录页面，注册）运行抽屉，但我不想在没有登录的情况下显示

Answer 1

navigation 未在您的范围内定义。
将options 用作function 并接收navigation 参见here。
您的代码应如下所示：

<Stack.Screen
  options={({ navigation }) => ({ //receive navigation here
    //navigation is defined  now you can use it
    headerLeft: () => (
        <TouchableOpacity 
           style={{paddingLeft:20}} 
           onPress={()=> navigation.openDrawer()}>
              <MaterialCommunityIcons name="menu" color={"white"} size={20} />
       </TouchableOpacity>),
  })}
/>

编辑：
查看完整示例（从嵌套堆栈导航中打开抽屉菜单）尝试吃零食here

import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';



function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}


const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

function DovizStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
       name="Profile"
       options={({ navigation }) => ({ //receive navigation here
          headerLeft: () => (
              <TouchableOpacity style={{paddingLeft:20}} onPress={()=> navigation.openDrawer()}>
                    <Text>open</Text>
            </TouchableOpacity>),
          })
        }
        component={ProfileScreen} />
    </Stack.Navigator>
  );
}



function DrawerStack() {
  return(
      <Drawer.Navigator initialRouteName="Doviz">
        <Drawer.Screen name="Doviz" component={DovizStack}/>
      </Drawer.Navigator>

  )
}


export default function App() {
  return (
    <NavigationContainer>
      <DrawerStack/>
    </NavigationContainer>
  );
}