DrawerNavigator引发未知错误
DrawerNavigator是React Navigation库中的一个导航组件，用于创建具有抽屉式导航的移动应用程序。它允许用户通过从屏幕边缘滑动或点击按钮来打开一个侧边栏，从而访问应用程序的不同页面或功能。
DrawerNavigator的优势在于提供了简单易用的API，使开发人员能够快速构建具有抽屉导航的应用程序。它还具有高度可定制性，可以根据应用程序的需求进行个性化配置。
DrawerNavigator的应用场景包括但不限于以下几种：
- 多页面应用程序：当应用程序具有多个页面或功能时，使用DrawerNavigator可以方便地组织和导航这些页面。
- 设置菜单：将应用程序的设置选项放在抽屉导航中，使用户可以方便地访问和修改应用程序的配置。
- 导航菜单：将应用程序的导航选项放在抽屉导航中，使用户可以快速切换不同的页面或功能。
对于React Native开发者，可以使用React Navigation库中的DrawerNavigator组件来实现抽屉导航。腾讯云提供了一系列与移动应用开发相关的产品，例如腾讯云移动应用开发套件（Mobile Application Development Kit，MADK），可以帮助开发者快速构建移动应用，并提供与云服务的集成能力。
更多关于React Navigation的信息和使用方法，可以参考腾讯云的文档：React Navigation文档
相关·内容
3回答
React -本机导航抽屉导航嵌套导航
react-native、react-navigation、create-react-native-app
目前，在我正在构建的react原生应用程序中，我有一个包含两个屏幕的抽屉导航器。对于导航，我使用的是react-导航。
代码如下：
import { DrawerNavigator } from 'react-navigation'
export default drawernav = DrawerNavigator(
{
Login: {Screen: Login},
Main : {Screen: Main }
}
)
虽然Login是在一个抽屉导航器中，我希望它使登录屏幕不具有抽屉导航功能，但主屏幕有登录和主作为两个
浏览 0提问于2017-07-08得票数 4
2回答
使用不同的道具响应本机导航到同一页。
react-native、react-navigation、react-navigation-drawer
我正在开发一个使用侧抽屉的RN应用程序。(RN版本: 0.59.8)
const DrawerNavigator = createDrawerNavigator(
{
Home: {
screen: HomeScreen
},
Poems: {
screen: PoemsScreen
},
Contest: {
screen: ContestScreen
},
AboutMe: {
浏览 0提问于2019-06-23得票数 4
1回答
反应导航-嵌套导航器
reactjs、react-native、react-navigation、stack-navigator
我正在开发一个使用ReactinativeReactive原住民的移动应用程序，我有点进退两难。我有两个要求：
1:能够向后导航。2:有一个抽屉(幻灯片菜单)
我使用的是，这对于这两个需求中的任何一个都很有用，但不能结合在一起(至少我已经理解了)。
我试过使用DrawerNavigator，它允许一个非常好的抽屉。但我还没能创建一个goback功能。在应用程序中，你应该能够打开抽屉并导航。当您在一个页面上，并导航到另一个页面时，您必须能够导航回您来自的页面。据我所知，这在StackNavigator中是可能的。但在StackNavigator中，没有抽屉功能。
所以，我想知道我有什么选择？
嵌
浏览 0提问于2018-07-03得票数 0
回答已采纳
4回答
如何在@react导航抽屉中使用useNavigation()？
javascript、reactjs、react-native、react-navigation、react-context
电流行为
我有一个使用 v5进行路由的反应本机应用程序。
我在所有视图中都有一个抽屉(离开菜单左)，我使用stackNavigation进行页面转换。
因为(1)，我的结构是drawerNavigator (a) > stackNavigator (b) > views (c)。
当我试图在我的useNavigation()中调用<DrawerContent />钩子时，我有以下错误：
Error: We couldn't find a navigation object. Is your component inside a navigator?
at
浏览 3提问于2020-02-06得票数 8
回答已采纳
16回答
获取未定义不是一个对象(计算'_this.props.navigation')
react-native、react-navigation
我正在使用DrawerNavigator，我有3页：Router page、mainScreen和photos page。
我创建了一个标题导航栏区域，我使用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>在mainScreen中打开抽屉菜单，并将其用于照片页面，在mainScreen中菜单是可以的，但是当我在照片页面中单击<TouchableHighlight onPress={() => this.props.navigatio
浏览 14提问于2017-07-20得票数 48
回答已采纳
1回答
反应导航显示/隐藏抽屉项目
reactjs、react-native、react-navigation
反应本机使用反应导航-显示/隐藏抽屉项目
我想知道你们，或者可能有人想出了一个更好的主意，在DrawerNavigator下展示或隐藏一些菜单或抽屉项目。
基本上，我有用户角色，我想显示/隐藏所选菜单的基于用户的角色。
我现在的设置是在DrawerNavigator中嵌套一个StackNavigator。
当前使用：
版本16.0.0-字母12
react本机版本0.46.0
react导航版本1.0.0-beta.11
浏览 6提问于2017-07-13得票数 5
3回答
在react- contentComponent中刷新导航
javascript、android、ios、react-native、react-navigation
我使用的是，其中我通过使用React-Navigation的contentComponent来使用自定义抽屉的功能。
const DrawerNavigation = DrawerNavigator({
DrawerStack: { screen: DrawerStack }
}, {
contentComponent: DrawerComponent,
drawerWidth: 300
})
这里的DrawerComponent是我的自定义导航抽屉，我在其中使用了自定义导航项目，如用户名、个人资料图片、电子邮件地址和其他菜单。
现在，每当用户更新他们的个人资料时，我想刷新我的Dr
浏览 1提问于2017-10-03得票数 8
1回答
使用DrawerNavigator作为主用户界面，应用程序总是输入默认的项目屏幕，而不显示抽屉项目。
react-native、react-navigation
我正在开发一个应用程序与ReactNative和反应导航。
我将DrawerNavigator设置为主UI。
但是，当应用程序启动时，它总是进入默认的项目屏幕，而不显示抽屉项目。
我遗漏了什么？
React导航版本："2.18.2“
App.js的代码如下。运行时，App显示"page1“，而不是显示2个绘图项'page1‘和'page1’
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { D
浏览 0提问于2018-11-28得票数 0
回答已采纳
1回答
将堆栈导航器与响应本机中的抽屉导航器组合起来
react-native、expo、react-navigation、react-navigation-stack、react-navigation-drawer
所以我是新的反应本地和反应导航。
我正在开发一个有7个主屏幕的应用程序：
HomeScreen，ProfileScreen，CocktailDetailScreen和PublishRecipeScreen (我希望能够通过抽屉ProfileScreen LoginScreen和RegisterScreen访问它们(我不想在抽屉导航器中显示这一点)。我只想在用户未登录时显示LandingScreen，如果用户希望登录或注册，则显示另一种)。
我已经能够安装一个工作良好的堆栈导航器，但我不知道如何将它与我想要的抽屉导航器结合起来。我尝试过不同的方法，但我遇到的错误如下：
The action &#
浏览 31提问于2022-01-30得票数 0
1回答
在卸载视图时防止状态丢失
react-native、react-navigation、react-native-maps
我的应用程序使用react-navigation DrawerNavigator组件，允许用户浏览应用程序中的各种屏幕。
我的react-native-maps MapView组件嵌套在通过DrawerNavigator访问的屏幕中。
我发现的问题是，如果您导航到应用程序中的另一个页面，然后导航回地图页面，则整个地图必须重新加载，以前的标记/地图配置将丢失。
是否有一种方法，可以防止屏幕卸载时，导航离开，或另一种方式阻止整个地图的重置？我不会在下面发布代码，因为我认为这个问题更多的是基于理论，而不是修复代码错误。
浏览 3提问于2018-02-11得票数 5
回答已采纳
2回答
React-两侧的本地DrawerNavigator菜单
javascript、reactjs、react-native、react-navigation、react-native-ios
我有一个带有DrawerNavigator的react原生应用程序。对于菜单，我有自己的组件。这很好用。现在我想在右侧添加第二个侧边菜单。有没有可能像Slack应用程序中那样有两个DrawerNavigator？这个解决方案对我不起作用：，因为我不想让TabController作为父对象。两个抽屉应该在所有屏幕上都可以访问。
我的代码如下所示：
import React from 'react'
import reducer from './src/reducers'
import { DrawerNavigator } from 'react-navi
浏览 3提问于2018-02-13得票数 0
回答已采纳
1回答
如何在折叠菜单图标上设置操作，而将其嵌套在react本机的堆栈导航中？
react-native、stack-navigator、react-navigation-drawer
我创建了一个堆栈导航&抽屉导航。抽屉导航嵌套在堆栈导航中，因为当用户第一次打开应用程序时，他们将看到演练页面，然后是包含抽屉导航的主页。
这是一个问题，我在headerLeft中添加了Drawer.Navigator中的screenOptions中的图像，并点击它名为navigation.openDrawer()，但是看起来navigation.openDrawer不是一个函数。
我想要的是，我想在标题中添加图片，比如打开抽屉的as菜单&其他2张图片用于其他页面，应用程序徽标在中间。
下面是完整视图示例的code & expo链接：
**APP.JS**
if(isFi
浏览 19提问于2022-09-06得票数 1
回答已采纳
1回答
反应导航(V2)：如何防止(锁定)嵌套堆栈中的抽屉打开？
react-native、locking、react-navigation、drawer
我正在使用React Native构建一个应用程序，并使用React导航进行导航。
为了能够对堆栈进行情态转换和常规的卡转换，以及拥有一个汉堡菜单，我将我的HomeStack嵌套在我的MainStack中，它位于我的MainDrawer中。
代码如下所示：
const HomeStack = createStackNavigator({...});
const MainStack = createStackNavigator({ HomeStack, ... }, { mode: "modal" });
const MainDrawer = createDrawerNaviga
浏览 1提问于2018-09-05得票数 0
1回答
带有React导航的react Native中的侧边栏菜单
javascript、node.js、reactjs、react-native、react-navigation
我在React Native中使用react-navigation，我想创建一个侧边栏菜单，它作为一个从左到右的覆盖打开，并填充了大约80-90%的宽度。
在没有反应导航的情况下，使用react-native-side-bar之类的包也可以做到这一点，但我想知道我是否可以使用DrawerNavigator获得完全相同的功能。
但DrawerNavigator似乎有菜单按钮。我不能自己配置覆盖吗？
编辑
解决方案1
一种方法是使用
const MyStackNavigator = StackNavigator({
A: { screen: AScreen },
B: { screen:
浏览 3提问于2017-05-23得票数 7
1回答
从响应导航pkg抛出错误从useNavigation中的TouchableOpacity调用DrawerNavigator钩子，问题体上有完整的源
javascript、react-native、react-hooks、react-navigation
我正在学习react (本机4天)，因为需要构建一个移动应用程序，并且在编写react时遇到以下问题--原生应用程序：
经过一些研究，我找到了一种将TouchableOpacity嵌入DrawerNavigator顶部的方法，就在汉堡包按钮之后，它给了我一个警告。
当我试图从useNavigation().navigate('Login');属性内部调用onPress属性来替换警报时，它会抛出下面的错误。
我想要镜像TouchableOpacity上进行导航的菜单项的行为。
Error: Invalid hook call. Hooks can only be called
浏览 2提问于2022-06-15得票数 0
1回答
将屏幕标题更新为所选选项卡导航的标题
react-native、react-navigation
我正在应用程序中使用嵌套选项卡导航实现抽屉导航。
目前，我有两个问题，我目前还不能解决，我正在寻找指点。我使用的反应导航v6。
单击任何选项卡导航链接时，我注意到我的屏幕标题总是设置为"Home“。是否可以将其更新到当前选定的选项卡？
在使用抽屉链接时，最后单击的选项卡似乎保持其状态，该过程看起来如下
从主页开始(显示主屏幕很好)
单击“用户配置文件”选项卡(呈现“用户配置文件”页很好)
然后从抽屉中单击“”，(呈现New页面很好)
然后在抽屉内单击"Home“(这将呈现用户配置文件屏幕)
我制作了一种小吃，希望能展示我面临的问题
浏览 2提问于2022-02-19得票数 2
回答已采纳
1回答
用I18nManager.forceRTL响应本机抽屉导航不工作
react-native、expo、react-navigation、react-navigation-drawer
一直在尝试使用@ app导航/本地堆栈来实现@react导航/抽屉，并使用世博迫使应用程序成为RTL。
App.tsx:
import { I18nManager } from 'react-native'
import { SafeAreaProvider } from 'react-native-safe-area-view'
import {useLoading} from '@hooks'
I18nManager.forceRTL(true)
I18nManager.allowRTL(true)
export default func
浏览 5提问于2022-01-09得票数 0
1回答
React-在同一屏幕中显示底部菜单和抽屉菜单的导航
react-native、react-navigation
我正在使用React-Navigation，我想要一个底部的选项卡菜单和一个抽屉菜单。经过一些摆弄，我猜我是接近了，但有点卡住了。不管怎样，下面是我的代码：
import { createStackNavigator,
createAppContainer,
createBottomTabNavigator,
createDrawerNavigator
} from 'react-navigation';
//import my screens... etc
class HomeScreen extends React.Component {
//O
浏览 1提问于2019-04-09得票数 1
1回答
如何修复预期的0参数，但在createDrawerNavigator中得到1
typescript、react-native、navigation-drawer
请帮我修复抽屉导航仪的错误
这是drawer.tsx的代码
错误:预期为0参数，但在createDrawerNavigator函数中为1。
import { createDrawerNavigator } from "@react-navigation/drawer";
import AboutStack from "./aboutStack";
import HomeStack from "./homeStack";
const DrawerNavigator = createDrawerNavigator({
Home: {
浏览 2提问于2022-09-10得票数 0
1回答
问: ReactNative StackNavigator inside
react-native、react-navigation
StackNavigator在DrawerNavigator中有什么好的没有bug的例子吗？在我的示例中，当抽屉打开时，顶部导航标题是隐藏的，当我在NewScreen页面中时，我无法打开抽屉(用幻灯片)。所以我想在标题和任何一页上打开抽屉。谢谢
这是代码
import React, { Component } from 'react';
import {
AppRegistry,
Button,
Platform,
ScrollView,
StyleSheet,
TouchableHighlight,
Text,
} f
浏览 4提问于2017-05-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
