引き出しをナビゲータービューに渡す

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

を行います引き出しコンポーネントがレンダリングされます。

これはあなたにとって意味がありますか？