react-navigation抽屉动态锁定

Question

如何动态锁定抽屉？我从react-native-modalbox开始使用模态。当我打开模态时，我称之为this.refs.modal.open();并锁定抽屉。我只知道drawerLockMode可以设置navigationOptions。但是模态不是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} />
});

Answer 1

您可以在redux的帮助下实现此目标，以下是步骤。

步骤1：为抽屉创建减速器，将标志保持在我们将用于动态锁定抽屉的状态。 第2步：订阅抽屉式减速机并绑定抽屉锁模具＆＃39;到那面旗帜。 第3步：只需从任何地方发送动作即可锁定抽屉。

这是代码

您的抽屉组件

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
}

}

现在使用

this.props.dispatch（{类型：＆＃39; DRAWER_OPEN＆＃39;}）;

this.props.dispatch（{类型：＆＃39; DRAWER_CLOSE＆＃39;}）; 动态锁定抽屉

Answer 2

我使用了以下代码

    static navigationOptions = ({ navigation }) => ({
drawerLockMode: navigation.state.params ? navigation.state.params.drawerLockMode : undefined});

为了隐藏导航抽屉，在称为this的条件下使用了此代码。

    this.props.navigation.setParams({ 
    drawerLockMode: locked-closed });