將抽屜傳遞給導航器視圖

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

你可以看到，一旦在用戶點擊按鈕打開抽屜，那麼抽屜組件將被渲染。

這對你有意義嗎？