React Native Navigation Drawer 問題（'navigation.openDrawer' 未定義））

Question

嗨，伙計們，我是本機的新手。 我想使用帶菜單按鈕的抽屜導航。 但實際上我可能不太了解反應導航。 當我按下 openDrawer 按鈕時，我收到這樣的錯誤；

類型錯誤：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請參見此處。
您的代碼應如下所示：

<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>),
  })}
/>

編輯 ：
查看完整示例（從嵌套堆棧導航中打開抽屜菜單）在此處嘗試小吃

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>
  );
}