将抽屉传递给导航器视图

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中，'this.props.drawer'是未定义的。

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

感谢您的帮助。

方舟。

Answer 1

你只需要传递下来openDrawer句柄向下至家组件，然后调用它的点击，或按。

当渲染家庭成分向下传递的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> 
    ); 
} 

你可以看到，一旦在用户点击按钮打开抽屉，那么抽屉组件将被渲染。

这对你有意义吗？