在场景中反应原生禁用抽屉

时间:2016-12-16 08:52:46

标签: javascript android ios react-native react-native-router-flux

我想禁用我的抽屉,因此在我的注册场景中无法访问它。我不知道如何从我的场景中引用抽屉。我怎样才能做到这一点?我的代码如下所示:

主:

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>
    );
}

1 个答案:

答案 0 :(得分:0)

经过几天的尝试后,我使用了EventEmitter。这是图书馆的链接:https://github.com/kmend/react-native-eventemitter