Передача выдвижного ящика в представления Navigator

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().

Спасибо вам за помощь.

Ark.

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

вы можете увидеть, что когда пользователь нажимает на кнопку, чтобы открыть ящик , то компонент ящика будет отображаться.

Это ли это имеет для вас смысл?