動態導航抽屜鎖

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

我用下面的代碼

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

為了隱藏導航抽屜，在稱為this的條件下使用了此代碼。

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

Answer 2

您可以在redux的幫助下完成此操作，步驟如下。

步驟1：為抽屜創建減速器，將其標志保持在其狀態，我們將使用該標志動態鎖定抽屜。 步驟2：訂閱抽屜的reducer，然后將“ drawerLockMode”綁定到該標志。 第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（{類型： 'DRAWER_OPEN'}）;

this.props.dispatch（{類型： 'DRAWER_CLOSE'}）; 動態鎖定抽屜