简体   繁体   中英

React native disable drawer in a scene

I want to disable my drawer so it's not accessible in my register scene. I don't know how to reference the drawer from inside my scenes. How can I do that? My code looks like this:

Main:

export default class Main extends Component {
render() {
    return (
    <AppDrawer ref={c => { c ? this.drawer = c.drawer : this.drawer }}>
      <StatusBar backgroundColor='#3B373C'/>
      <AppRouter/>
    </AppDrawer>
    );
}
}

AppDrawer:

export default class AppDrawer extends Component {
constructor(props) {
    super(props);
    this.state = {
        disabled: false
    }
}

render() {
    return (
        <Drawer
            ref={c => this.drawer = c}
            tapToClose
            disabled={this.state.disabled}
            type="overlay"
            content={<DrawerContent />}
            openDrawerOffset={0.3}
            panCloseMask={0.2}
            closedDrawerOffset={-3}
            styles={style}
            tweenHandler={(ratio) => ({ main: { opacity: (2 - ratio) / 1.5 } })}>
    {React.Children.map(
                this.props.children, c => React.cloneElement(c, {route: this.props.route})
            )}
        </Drawer>
)
}
}

disable() {
    this.setState({disabled: true});
}

enable() {
    this.setState({disabled: false});
}

AppDrawer.propTypes = {
    children: PropTypes.node,
    route: PropTypes.object,
}

AppRouter:

export default class AppRouter extends Component {
render() {
var hamburgerIcon = require('../../res/image/hamburger_icon.png');
var mailIcon = require('../../res/image/hamburger_icon.png');
    return (
        <Router
      style={routerStyle.router}
      navigationBarStyle={navBarStyle.navBar}
      titleStyle={navBarStyle.navTitle}
      leftButtonStyle={navBarStyle.leftButtonStyle}
      drawerImage={hamburgerIcon}>
      <Scene key='Register' component={Register}  title='Rejestracja'     type='reset' />
      <Scene key='Profile'  component={Profile}   title='Edycja Profilu'  type='reset' />
      <Scene key='History'  component={History}   title='Trasy'           type='reset'
        rightButtonImage={mailIcon}
        onRight={this.sendMail}
        rightButtonStyle={navBarStyle.rightButtonStyle}
        rightButtonIconStyle={navBarStyle.rightButtonIconStyle} />
      <Scene key='Tracking' component={Tracking}  title='Nowa trasa'    type='reset' />
      <Scene key='Summary'  component={Summary}   title='Podsumowanie'  type='reset' />
        </Router>
    );
}

After days of trying I used EventEmitter instead. Here's the link to the library: https://github.com/kmend/react-native-eventemitter

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM