使用toggleDrawer导航时出错。ToggleDrawer不是函数

Question

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

\n

我设法在我的页面中插入Drawer，但其中一些是MapView内容，因此用户无法真正从屏幕上拖动菜单...\n所以我决定实现一个按钮来调用ToggleDrawer函数，这是在文档中介绍的。但我收到错误：

\n

\n

类型错误：navigation.ToggleDrawer 不是函数。(在\'navigation.ToggleDrawer()\'中，\'navigation.ToggleDrawer\'未定义)

\n

\n

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

\n

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

\n

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

\n

export default function IncidentsMap() {\n    const navigation = useNavigation<any>();\n\n\n    return (\n\n        <View style={styles.container}>\n\n            {typeof location?.coords.latitude == \'number\' ?\n                <View style={styles.container}>\n                    <MapView\n                        provider={PROVIDER_GOOGLE}\n                        style={styles.map}\n                        >\n\n                            <Callout tooltip={true} onPress={handleNavigateToIncidentDetails}>\n                                <View style={styles.calloutContainer}>\n                                    <Text style={styles.calloutText}>Enchente rasa</Text>\n                                </View>\n                            </Callout>\n                        </Marker>\n                    </MapView>\n                    <View style={styles.footer}>\n                        <Text style={styles.footerText}>Reporte um incidente</Text>\n                        <RectButton style={styles.createFloodButton} onPress={handleNavigateToCreateIncident}>\n                            <Feather name=\'plus\' size={20} color={\'#fff\'}/>\n                        </RectButton>\n                    </View>\n                    <View style={styles.menuContainer}>\n                        <RectButton style={styles.menuButton} onPress={() => navigation.ToggleDrawer()}>\n                            <Feather name=\'menu\' size={20} color={\'#fff\'}/>\n                        </RectButton>\n                    </View>\n                </View> : <View style={styles.container}>\n                    <Text>Carregando ... Carregando ... Carregando ... Carregando ... Carregando ...\n                        Carregando </Text>\n                </View>}\n        </View>\n    );\n}\n

\n

这是我的路线文件：

\n

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

\n

这是我的抽屉文件：

\n

\ninterface Props {\n    navigation: any\n}\nexport function DrawerImported(props) {\n\n    const paperTheme = useTheme();\n\n    function CustomDrawerContent(props) {\n        return (\n            <View style={{flex:1}}>\n                <DrawerContentScrollView {...props}>\n                    <View style={styles.drawerContent}>\n                        <View style={styles.userInfoSection}>\n                            <View style={{flexDirection:\'row\',marginTop: 15}}>\n                                <Avatar.Image\n                                    source={{\n                                        uri: \'https://avatars.githubusercontent.com/u/47571680?v=4\'\n                                    }}\n                                    size={50}\n                                />\n                                <View style={{marginLeft:15, flexDirection:\'column\'}}>\n                                    <Title style={styles.title}>Vin\xc3\xadcius Melo</Title>\n                                </View>\n                            </View>\n                        </View>\n\n                        <View style={styles.drawerSection}>\n                            <DrawerItem\n                                icon={({color, size}) => (\n                                    <Feather\n                                        name="map"\n                                        color={color}\n                                        size={size}\n                                    />\n                                )}\n                                label="Mapa da regi\xc3\xa3o"\n                                onPress={() => {props.navigation.navigate(\'IncidentsMap\')}}\n                            />\n                            <DrawerItem\n                                icon={({color, size}) => (\n                                    <Feather\n                                        name="user"\n                                        color={color}\n                                        size={size}\n                                    />\n                                )}\n                                label="Profile"\n                                onPress={() => {props.navigation.navigate(\'Profile\')}}\n                            />\n                            <DrawerItem\n                                icon={({color, size}) => (\n                                    <Feather\n                                        name="settings"\n                                        color={color}\n                                        size={size}\n                                    />\n                                )}\n                                label="Configura\xc3\xa7\xc3\xb5es"\n                                onPress={() => {props.navigation.navigate(\'Settings\')}}\n                            />\n                            <DrawerItem\n                                icon={({color, size}) => (\n                                    <Feather\n                                        name="alert-triangle"\n                                        color={color}\n                                        size={size}\n                                    />\n                                )}\n                                label="Reportar Bug"\n                                onPress={() => {props.navigation.navigate(\'BugReport\')}}\n                            />\n                        </View>\n                       \n                    </View>\n                </DrawerContentScrollView>\n                <View style=  {styles.bottomDrawerSection}>\n                    <DrawerItem\n                        icon={({color, size}) => (\n                            <Feather\n                                name="log-out"\n                                color={color}\n                                size={size}\n                            />\n                        )}\n                        label="Log Out"\n                        onPress={() => {}}\n                    />\n                </View>\n            </View>\n        );\n    }\n    const Drawer = createDrawerNavigator();\n\n    return (\n        <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>\n            <Drawer.Screen name="Map" component={IncidentsMap}/>\n            <Drawer.Screen name="Settings" component={Settings}/>\n            <Drawer.Screen name="Profile" component={Profile}/>\n            <Drawer.Screen name="BugReport" component={BugReport}/>\n\n        </Drawer.Navigator>\n    );\n}\n    function MyDrawer() {\n\n    return(\n        <MyDrawer/>\n    );\n}\n

\n

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

\n

Answer 1

它toggleDrawer不是ToggleDrawer

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

另外 ，我想你应该能够navigation直接从组件道具访问道具，例如function IncidentMap({ navigation })

编辑

根据文档......这就是你应该如何Drawer使用CustomDrawerContent

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

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