react-navigation抽屉动态锁定

By simon at 2018-02-07 • 0人收藏 • 64人看过

如何动态锁定抽屉?我有一个模式使用[react-native- modalbox](https://github.com/maxs15/react-native-mod阿尔沃斯)。当我开放的时候 我称之为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} />
});

1 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

你可以在[redux](https://redux.js.org/)的帮助下做到这一点,这里是 步骤。 第1步:创建抽屉的减速器在我们将要的状态下保持一面旗帜 被用来动态锁定抽屉。步骤2:订阅抽屉减速器 并绑定'drawerLockMode'到那个标志。第3步:从发送行动 随时随地锁定抽屉。 这里是代码 您的抽屉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
}
} 现在使用 this.props.dispatch({类型: 'DRAWEROPEN'}); this.props.dispatch({类型: 'DRAWERCLOSE'});锁定动态抽屉

登录后方可回帖

Loading...