Question

我试图将抽屉传递给不同的视图，以便他们可以点击按钮打开它。

index.js - 在这里创建了抽屉

renderScene(route, navigator) {
    var Component = ROUTES[route.name];
    return <Component route={route} navigator={navigator} api={new Api()} session={new Session()} style={globalStyle} {...route.passProps} />;
}

render() {
    return (
        <Drawer
            ref={(ref) => { this._drawer = ref; } }
            type="overlay"
            tweenDuration={150}
            //content={<SideBar navigator={this._navigator} />}
            tapToClose
            acceptPan={false}
            onClose={() => this.closeDrawer()}
            openDrawerOffset={0.2}
            panCloseMask={0.2}
            styles={{
                drawer: {
                    shadowColor: '#000000',
                    shadowOpacity: 0.8,
                    shadowRadius: 3,
                },
            }}
            tweenHandler={(ratio) => {
                return {
                    drawer: { shadowRadius: ratio < 0.2 ? ratio * 5 * 5 : 5 },
                    main: {
                        opacity: (2 - ratio) / 2,
                    },
                };
            } }
            negotiatePan
            >
            <Navigator
                ref={(ref) => { this._navigator = ref; } }
                initialRoute={{ name: 'home', passProps: { drawer: this._drawer } }}
                renderScene={this.renderScene}
                />
        </Drawer>
    );
}

home.js - 这是页眉和页脚以及打开的抽屉按钮的位置。

render() {
    return (
        <Container>
            <Header>
                <Button transparent onPress={this.props.drawer.open()}>
                    <Icon name="ios-menu" />
                </Button>
                <Title>Botulo.</Title>
            </Header>

            <Content>
                <Text>{this.props.user.display}</Text>
            </Content>

            <Footer>
                <FooterTab>
                    <Button transparent>
                        <Icon name='ios-person' />
                    </Button>
                    <Button transparent>
                        <Icon name='ios-grid-outline' />
                    </Button>
                    <Button transparent>
                        <Icon name='ios-chatboxes' />
                    </Button>
                </FooterTab>
            </Footer>
        </Container>
    );
}

问题在于home.js，＆＃39; this.props.drawer＆＃39;未定义。

传递抽屉实例并在其上调用open / close（）的正确方法是什么。

谢谢你的帮助。

阿肯色州

Answer 1

您只需将openDrawer处理程序向下传递到 home 组件，然后在单击时调用它，或按。

当你渲染home组件传递onClick时，像这样：

constructor(props) {
    super(props)

    this.openDrawer = this.openDrawer.bind(this)
}

this.openDrawer() {
    this.setState({ drawerOpen: true })
}

render() {

    let drawer = null
    if (this.state.drawerOpen) {
        drawer = (
            <Drawer 
               {/* whatever props you need */}
            />
        )
    }

    return (
        <Container>
         { drawer }
         <Home 
             onClick={this.openDrawer}
             {/* whatever else props you need */}
         />
        </Container>
    );
}

终于在家里你这么做了

render() {
    return (
        <Container>
            <Header>
                <Button transparent onPress={this.props.onClick}>
                    <Icon name="ios-menu" />
                </Button>
                <Title>Botulo.</Title>
            </Header>
        </Container>
    );
}

您可以看到，一旦用户点击按钮打开抽屉，抽屉组件就会被渲染。

这对你有意义吗？

将抽屉传递给导航器视图

1 个答案: