ExpoReactNativeonPressnavigation.openDrawer()不作業。預先感謝您對我們的支持

我無法通過按標題按鈕打開抽屜，我嘗試了很多次但未能解決問題。下面是我遇到的問題 - Menu.js:65 Uncaught TypeError: navigation.openDrawer is not a function at onPress

        **My App.js file**
         import React from 'react'
            import { NavigationContainer } from '@react-navigation/native';
            import Menu from './Src/Menu';
            export default function App() {
              return (
                <NavigationContainer>
                  <Menu />
                </NavigationContainer>
              );
            }
        

Menu.js 檔案，這是我在此檔案上遇到問題的選單檔案-

        import React from 'react'
        import { Button } from 'react-native';
        import { Ionicons } from '@expo/vector-icons';
        import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
        import About from './About';
        import Menu2 from './menu2';
        
        const Tab = createBottomTabNavigator();
        function Menu() {
          return (
            <Tab.Navigator
              screenOptions={({ route }) => ({
                headerShown: true,
                tabBarIcon: ({ focused, color, size }) => {
                  if (route.name === 'Menu2') {
                    return (
                      <Ionicons
                        name={
                          focused
                            ? 'ios-information-circle'
                            : 'ios-information-circle-outline'
                        }
                        size={size}
                        color={color}
                      />
                    );
                  }
                  else if (route.name === 'About') {
                    return (
                      <Ionicons
                        name={focused ? 'list' : 'list-outline'}
                        size={size}
                        color={color}
                      />
                    );
                  }
                },
                tabBarInactiveTintColor: 'gray',
                tabBarActiveTintColor: 'tomato',
              })}
            >
              <Tab.Screen
                name="Menu2"
                component={Menu2}
                options={{
                  headerLeft: () => (
                    <Button
                      onPress={() => navigation.openDrawer()}
                      title="Open Drawer"
                      color="#00cc00"
                    />
                  ),
                }}
              />
              <Tab.Screen name="About" component={About}
              />
            </Tab.Navigator>
          );
        }
        export default Menu;

uj5u.com熱心網友回復：

你沒有navigation在你的代碼里面定義任何地方Menu.js，你可以嘗試：

function Menu({navigation}) {

編輯：如果您嘗試像這樣在選項屬性中導航怎么辦？

<Tab.Screen
    name="Menu2"
    component={Menu2}
    options={({navigation}) => ({
       headerLeft: () => (
          <Button
               onPress={() => navigation.openDrawer()}
               title="Open Drawer"
               color="#00cc00"
               />
       ),
    })}
/>

uj5u.com熱心網友回復：

您可以嘗試以下方法

import { DrawerActions } from '@react-navigation/native';


options={{
    headerLeft: () => (
         <Button
            onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
            title="Open Drawer"
            color="#00cc00"
          />
       ),
    }}

標籤：反应 反应式 世博会 导航抽屉

上一篇：React，在我的服務中獲取InvalidHookCall以創建axios實體

下一篇：reactnativeModal打開時使背景變為深灰色