gpt4 book ai didi

react-native - 如何使用抽屉导航锁定特定页面的抽屉[ react 导航] [ react native ]

转载 作者:行者123 更新时间:2023-12-03 14:29:48 34 4
gpt4 key购买 nike

这是我的抽屉导航:

const DashboardStack = StackNavigator({
Dashboard: {
screen: Dashboard
},
}, {
headerMode: 'screen',
});

const DetailsformStack = StackNavigator({
Detailsform: {
screen: Detailsform
},
}, {
headerMode: 'none'
});

const OtpStack = StackNavigator({
Otp: {
screen: Otp,
drawer: {
lockMode: 'locked-closed'
}
},
}, {
headerMode: 'none'
});

const MobilenumberStack = StackNavigator({
Mobilenumber: {
screen: Mobilenumber
},
}, {
headerMode: 'none'
});

const DrawerviewStack = StackNavigator({
Drawerview: {
screen: Drawerview
},
}, {
headerMode: 'none'
});

const ExamsheetStack = StackNavigator({
Examsheet: {
screen: Examsheet
},
}, {
headerMode: 'none'
});

const TopicStack = StackNavigator({
Topic: {
screen: Topic
},
}, {
headerMode: 'screen'
});

const DrawerStack = DrawerNavigator({
Otp: {
screen: OtpStack,
},
Dashboard: {
screen: DashboardStack,
},
Detailsform: {
screen: DetailsformStack,
},
Mobilenumber: {
screen: MobilenumberStack,
},
Drawerview: {
screen: DrawerviewStack,
},
Examsheet: {
screen: ExamsheetStack,
},
Topic: {
screen: TopicStack,
}
}, {
headerMode: 'none',
initialRouteName: 'Mobilenumber',
contentComponent: Drawerview,

lockMode: 'locked-closed'
});

导出默认的DrawerStack

如何将锁定模式 lockMode添加到特定页面。

我尝试添加
drawer: {lockMode: 'locked-closed'}在组件页面和抽屉导航页面中都无法正常工作。

react 导航是否具有锁定模式功能,或者我需要禁用滑动手势?

如果没有任何功能,请让我知道如何禁用特定组件或页面的滑动手势。

最佳答案

martnu为此提供了一个patch,但尚未合并。
我试图手动修补它,并且效果很好。

它仅适用于两个文件的更改:(引用此页面https://github.com/react-community/react-navigation/pull/793/files)

  1. react-navigation/src/TypeDefinition.js,


将下面的代码复制到 NavigationDrawerScreenOptions中,在 NavigationRouteConfigMap的上方,放入 NavigationDrawerScreenOptions的声明中:

drawerLockMode?: 'unlocked' | 'locked-close' | 'locked-open',

  1. react-navigation/src/views/DrawerView.js,


在函数返回之前,将以下代码复制到 render()中:

const options = this.props.router.getScreenOptions(
addNavigationHelpers({
state: this._screenNavigationProp.state,
dispatch: this._screenNavigationProp.dispatch,
}),
this.props.screenProps,
);

并在 <DrawLayout>之后紧接着将以下代码复制到返回的 ref Prop 中:

drawerLockMode={options.drawerLockMode || 'unlocked'}

Usage:



您只需添加以下即可在任何屏幕上禁用抽屉:

navigationOptions: {
drawerLockMode: 'locked-closed'
}

并启用抽屉:

navigationOptions: {
drawerLockMode: 'unlocked'
}

关于react-native - 如何使用抽屉导航锁定特定页面的抽屉[ react 导航] [ react native ],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43885690/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com