使用 toggleDrawer navigation.ToggleDrawer 不是函数时出错

Question

我目前在我的应用程序上使用堆栈导航，但我决定为用户菜单增加一个抽屉。

我设法在我的页面中插入了抽屉，但其中一些是 MapView 内容，因此用户无法真正将菜单从屏幕上拖动... 所以我决定实现一个按钮来调用ToggleDrawer函数，在documentation中给出。但我收到错误：

TypeError: navigation.ToggleDrawer is not a function. (In 'navigation.ToggleDrawer()', 'navigation.ToggleDrawer' is undefined)

这是我的地图屏幕，我试图在其中插入按钮，如下所示：

onPress={() => navigation.ToggleDrawer()}

如果我从 useNavitation() 中删除 <any>，我会收到以下信息： Property 'ToggleDrawer' does not exist on type 'NavigationProp

export default function IncidentsMap() {
    const navigation = useNavigation<any>();


    return (

        <View style={styles.container}>

            {typeof location?.coords.latitude == 'number' ?
                <View style={styles.container}>
                    <MapView
                        provider={PROVIDER_GOOGLE}
                        style={styles.map}
                        >

                            <Callout tooltip={true} onPress={handleNavigateToIncidentDetails}>
                                <View style={styles.calloutContainer}>
                                    <Text style={styles.calloutText}>Enchente rasa</Text>
                                </View>
                            </Callout>
                        </Marker>
                    </MapView>
                    <View style={styles.footer}>
                        <Text style={styles.footerText}>Reporte um incidente</Text>
                        <RectButton style={styles.createFloodButton} onPress={handleNavigateToCreateIncident}>
                            <Feather name='plus' size={20} color={'#fff'}/>
                        </RectButton>
                    </View>
                    <View style={styles.menuContainer}>
                        <RectButton style={styles.menuButton} onPress={() => navigation.ToggleDrawer()}>
                            <Feather name='menu' size={20} color={'#fff'}/>
                        </RectButton>
                    </View>
                </View> : <View style={styles.container}>
                    <Text>Carregando ... Carregando ... Carregando ... Carregando ... Carregando ...
                        Carregando </Text>
                </View>}
        </View>
    );
}

这是我的路线文件：

export default function Routes() {
    return(
        <NavigationContainer>
            <Navigator screenOptions={{headerShown: false}}>
                <Screen name={'MyDrawer'} component={DrawerImported}/>
                {/*<Screen name="GetLocationTest" component={GetLocationTest}/>*/}
                <Screen name="WelcomePage" component={WelcomePage}/>
                <Screen name="WelcomePageStep2" component={WelcomePageStep2}/>
                <Screen name="IncidentsMap" component={IncidentsMap}/>
                <Screen name="IncidentDetails"
                        component={IncidentDetails}
                        options={{
                            headerShown: true,
                            header: () => <Header showCancel={false} title="Incidente"/>
                        }}
                />
                <Screen name="SelectIncidentLocation" component={SelectIncidentLocation}
                        options={{
                            headerShown: true,
                            header: () => <Header title="Selecione no Mapa" showCancel={false}/>
                        }}
                />
                <Screen name="IncidentData" component={IncidentData}/>
                <Screen name="Profile" component={Profile}/>

                <Screen name="Settings" component={Settings}
                        options={{
                    headerShown: true,
                    header: () => <Header title="Configurações" showCancel={false}/>
                }}
                />


            </Navigator>
        </NavigationContainer>
    )
}

这是我的抽屉文件：


interface Props {
    navigation: any
}
export function DrawerImported(props) {

    const paperTheme = useTheme();

    function CustomDrawerContent(props) {
        return (
            <View style={{flex:1}}>
                <DrawerContentScrollView {...props}>
                    <View style={styles.drawerContent}>
                        <View style={styles.userInfoSection}>
                            <View style={{flexDirection:'row',marginTop: 15}}>
                                <Avatar.Image
                                    source={{
                                        uri: 'https://avatars.githubusercontent.com/u/47571680?v=4'
                                    }}
                                    size={50}
                                />
                                <View style={{marginLeft:15, flexDirection:'column'}}>
                                    <Title style={styles.title}>Vinícius Melo</Title>
                                </View>
                            </View>
                        </View>

                        <View style={styles.drawerSection}>
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="map"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Mapa da região"
                                onPress={() => {props.navigation.navigate('IncidentsMap')}}
                            />
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="user"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Profile"
                                onPress={() => {props.navigation.navigate('Profile')}}
                            />
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="settings"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Configurações"
                                onPress={() => {props.navigation.navigate('Settings')}}
                            />
                            <DrawerItem
                                icon={({color, size}) => (
                                    <Feather
                                        name="alert-triangle"
                                        color={color}
                                        size={size}
                                    />
                                )}
                                label="Reportar Bug"
                                onPress={() => {props.navigation.navigate('BugReport')}}
                            />
                        </View>
                       
                    </View>
                </DrawerContentScrollView>
                <View style=  {styles.bottomDrawerSection}>
                    <DrawerItem
                        icon={({color, size}) => (
                            <Feather
                                name="log-out"
                                color={color}
                                size={size}
                            />
                        )}
                        label="Log Out"
                        onPress={() => {}}
                    />
                </View>
            </View>
        );
    }
    const Drawer = createDrawerNavigator();

    return (
        <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
            <Drawer.Screen name="Map" component={IncidentsMap}/>
            <Drawer.Screen name="Settings" component={Settings}/>
            <Drawer.Screen name="Profile" component={Profile}/>
            <Drawer.Screen name="BugReport" component={BugReport}/>

        </Drawer.Navigator>
    );
}
    function MyDrawer() {

    return(
        <MyDrawer/>
    );
}

我应该如何在我的屏幕上调用这个抽屉？

Answer 1

是toggleDrawer ...不是ToggleDrawer

RectButton 
    onPress={() => navigation.toggleDrawer()} 
/>

加上我想你应该能够直接从 function IncidentMap({ navigation })

之类的组件道具访问 navigation 道具

编辑

According to the docs ...这就是您使用 CustomDrawerContent

渲染 Drawer 的方式

<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  {/* screens */}
</Drawer.Navigator>

因为您在路由文件中的内容令人困惑...这就是无法通过渲染屏幕的 props 访问 navigation 对象的原因...

使用 toggleDrawer navigation.ToggleDrawer 不是函数时出错

Error when using toggleDrawer navigation.ToggleDrawer is not a function

typescript

navigation-drawer

react-native

react-typescript