[英]react-navigation Drawer lock dynamically
How to lock the drawer dynamically ? 如何动态锁定抽屉? I have a modal use from react-native-modalbox .
我有一个来自react-native-modalbox的模态用法。 When I open up the modal, I call this
this.refs.modal.open();
打开模态时,将其称为
this.refs.modal.open();
and locked the drawer. 并锁好抽屉。 I only know that
drawerLockMode
can set in navigationOptions
. 我只知道
drawerLockMode
可以在navigationOptions
设置。 But modal is not a screen in DrawerNavigator
但是模式不是
DrawerNavigator
的屏幕
const MainDrawer = DrawerNavigator({
Event: { screen: EventScreen },
Wallet: { screen: WalletScreen},
Profile: { screen: ProfileScreen},
Contact: { screen: MemberContactScreen},
Reward: {
screen: MemberRewardScreen,
navigationOptions:{
drawerLockMode :'locked-closed'
}},
},{
contentComponent: props => <DrawerScreen {...props} />
});
static navigationOptions = ({ navigation }) => ({
drawerLockMode: navigation.state.params ? navigation.state.params.drawerLockMode : undefined});
this.props.navigation.setParams({
drawerLockMode: locked-closed });
You can achieve this with the help of redux , here are the steps. 您可以在redux的帮助下完成此操作,步骤如下。
step 1: Create the reducer for drawer keep a flag in its state which we will be using to dynamically lock the drawer. 步骤1:为抽屉创建减速器,将其标志保持在其状态,我们将使用该标志动态锁定抽屉。 step 2:subscribe to drawer's reducer and bind 'drawerLockMode' to that flag.
步骤2:订阅抽屉的reducer,然后将“ drawerLockMode”绑定到该标志。 step 3: just dispatch the action from anywhere to lock the drawer.
第3步:只需从任何地方调度动作即可锁定抽屉。
here is the code 这是代码
Your drawer component 您的抽屉组件
class Drawer extends Component{
constructor(props) {
super(props);
this.state = {drawerLockMode:this.props.drawerLockMode};
}
render() {
const options = {
// initialRouteName: 'LandingPage',
drawerPosition: 'left',
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width,
gesturesEnabled: false
};
const Drawer = DrawerNavigator(RouteConfigs, options);
return (
<Drawer
screenProps={{drawerLockMode:this.props.drawerLockMode}}
/>
);
}
}
function mapStatetoProps(state)
{
return {
drawerLockMode:state.draweReducer.drawerLockMode
}
}
export default connect(mapStatetoProps)(Drawer);
export default function reducer(state = {drawerLockMode:'unlocked'}, action) {
switch (action.type) {
case 'DRAWER_LOCK':
return Object.assign({},state,{drawerLockMode:'locked-closed'});
case 'DRAWER_OPEN':
return Object.assign({},state,{drawerLockMode:'unlocked'});
default:
return state
}
} }
now use 现在使用
this.props.dispatch({type:'DRAWER_OPEN'}); this.props.dispatch({类型: 'DRAWER_OPEN'});
this.props.dispatch({type:'DRAWER_CLOSE'}); this.props.dispatch({类型: 'DRAWER_CLOSE'}); to lock the drawer dynamically
动态锁定抽屉
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.