我使用react-navigation作为我的react native应用程序的导航包。并且还安装并配置了react-native-gesture-handler
沿着文档中提到的react-navigation
。
我面临的问题是抽屉不能随意打开。大多数情况下,这发生在用户沿着主堆栈导航通过并返回主页以打开抽屉时。否则,抽屉似乎工作没有任何问题。
这是我如何配置我的导航,
主堆栈导航
const AppStack = createStackNavigator(
{
DrawerNav: DrawerNav,
Home: Home,
Notification: Notification,
HomeSearch: HomeSearch
}
字符串
抽屉导航
const MyDrawerNavigator = createDrawerNavigator(
{
Home: Home,
MyAccount: MyAccount,
ContactUs: ContactUs,
InviteFriend: InviteFriend,
Terms: Terms,
SignOut: SignOut
},
型
和主堆栈也包含了一些标签堆栈也,我想知道为什么抽屉没有React。
我用来打开抽屉的密码是
this.props.navigation.openDrawer();
型
上面的代码给出了
this.props.navigation.openDrawer()undefined
当我提到的上述崩溃发生时
作为我使用的修复,
import { DrawerActions } from "react-navigation";
this.props.navigation.dispatch(DrawerActions.openDrawer())
型
上面的代码也停止工作后,用户通过堆栈导航几次,但不给予任何错误的发展。
此错误在生产和开发中都会发生
当前正在运行react native:0.59.8React:16.8.3React导航:3.9.1,react-native-gesture-handler:1.1.0,
任何帮助都将不胜感激,先谢了
3条答案
按热度按时间ecbunoof1#
尝试使用抽屉导航 Package 所有堆栈导航。
字符串
现在用抽屉导航将上面的内容 Package 起来
型
现在StackNav将显示在抽屉中作为屏幕之一。所以创建一个类并返回null,然后将其传递给Drawer label。
型
现在您可以调用this.props.navigation.openDrawer();任何地方的应用程序。如果成功了告诉我。
3qpi33ja2#
我想你可以用另一种简单的方法来处理这个问题:
您可以使用this link中提供的
react-native-drawer
,现在我将向您展示如何使用它:AppStack:
字符串
首页导航
型
假设这是你的主页:
首页
型
正如你所看到的,你可以通过
this._drawer
访问抽屉,在这里我将向你展示<DrawerComponent>
是如何工作的:DrawerComponent:
型
这对我很好,我希望这对你也有效。
最好的问候。
h9a6wy2h3#
尝试导入'react-native-gesture-handler';在app.js或index.js文件中