这是我的抽屉导航:
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
添加到特定页面。
我尝试在组件页面和drawerNavigation页面中添加drawer: {lockMode: 'locked-closed'}
,但它不起作用。
反应导航是否具有锁定模式功能还是需要禁用滑动手势?
如果没有功能,请告诉我如何禁用特定组件或页面的滑动手势。
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'
}
我也在react-navigation v2上遇到过这个问题。正如在drawer docs中所写,解决方案可以是在路由初始化之后定义导航选项,并禁止在定义的路径中显示抽屉导航器。
我的路线看起来像
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,
};
}