这是我的抽屉导航:
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'}
在两个组件页面和drawerNavigation页面中,但它不起作用。
反应导航是否具有锁定模式功能,还是需要禁用滑动手势?
如果没有任何功能,请告诉我如何禁用特定组件或页面的滑动手势。
答案 0 :(得分:6)
martnu为此提供了patch,但尚未合并。 我尝试手动修补它并且工作正常。
仅适用于更改两个文件:(对此页面的引用https://github.com/react-community/react-navigation/pull/793/files)
- 反应的导航/ SRC / TypeDefinition.js ,
醇>
将代码下方的NavigationDrawerScreenOptions
复制到NavigationRouteConfigMap
上方,然后将NavigationDrawerScreenOptions
声明:
drawerLockMode?: 'unlocked' | 'locked-close' | 'locked-open',
- 反应的导航/ SRC /视图/ DrawerView.js ,
醇>
在函数返回之前将代码复制到render()
:
const options = this.props.router.getScreenOptions(
addNavigationHelpers({
state: this._screenNavigationProp.state,
dispatch: this._screenNavigationProp.dispatch,
}),
this.props.screenProps,
);
并在<DrawLayout>
之后立即将代码复制到返回的ref
道具中
drawerLockMode={options.drawerLockMode || 'unlocked'}
用法:
只需添加以下内容即可在任何屏幕上禁用抽屉:
navigationOptions: {
drawerLockMode: 'locked-closed'
}
并启用抽屉:
navigationOptions: {
drawerLockMode: 'unlocked'
}
答案 1 :(得分:3)
我在react-navigation v2上也遇到了这个问题。如drawer docs中所述 解决方案可以是在路线初始化之后立即定义导航选项,并且禁止在定义的路线中显示Drawer导航器。
我的路线看起来
const RoutesStack = StackNavigator({
Authentication: {
screen: Authentication,
},
并添加了选项,波纹管。
RoutesStack.navigationOptions = ({ navigation }) => {
name = (navigation.state.index !== undefined ? navigation.state.routes[navigation.state.index] : navigation.state.routeName)
let drawerLockMode = 'locked-closed'
if (name.routeName != 'Authentication' && name.routeName != 'Signup') {
drawerLockMode = 'unlocked'
}
return {
drawerLockMode,
};
}
答案 2 :(得分:0)
您可以通过添加以下内容来显示特定页面的“抽屉导航”
.......
Dashboard :{
screen: DashboardStack,
navigationOptions: ({ navigation }) => ({
drawerLockMode: 'unlocked',
})
}
.......
答案 3 :(得分:0)
@ajith的答案帮助了我!
这是我的代码:
const DrawerStack = createDrawerNavigator(
{
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
drawerLockMode: 'locked-closed',
})
},
Dashboard: { screen: Dashboard},
.....
},
DrawerNavigatorConfig)
希望这会有所帮助! :)
答案 4 :(得分:0)
现在,在react-navigation版本5中已经进行了更改。
swipeEnabled
用于将抽屉锁定在Drawer.Screen
内的Drawer.Navigator
中
访问https://reactnavigation.org/docs/drawer-navigator/#swipeenabled
请参见以下代码:
import { createDrawerNavigator } from "@react-navigation/drawer";
import React from "react";
import { Sidebar } from "./SideBar";
import { ScreenWithDrawerEnabled } from "./ScreenWithDrawerEnabled";
import { ScreenWithDrawerDisabled } from "./ScreenWithDrawerDisabled";
const Drawer = createDrawerNavigator();
export const DashboardDrawerNavigator = () => (
<Drawer.Navigator
initialRouteName={ScreenWithDrawerEnabled}
drawerPosition="left"
drawerType="slide"
drawerContent={props => <Sidebar {...props} />}
>
<Drawer.Screen
name={'ScreenWithDrawerEnabled'}
component={ScreenWithDrawerEnabled}
/>
<Drawer.Screen
options={({ route, navigation }) => {
return {
swipeEnabled: false,
};
}}
name={'ScreenWithDrawerDisabled'}
component={ScreenWithDrawerDisabled}
/>
</Drawer.Navigator>
);