Drawerを開く方法

Question

私はDrawer my appを使用してカスタムアイコンを使用するとき、私の問題はDrawer SceneとそのOKでカスタムアイコンを使用したいのですが、開いたり閉じる方法を教えてください。引き出し！

これは私のルータです：

<Scene 
    key="TabbarWrapper" 
    component={NavigationDrawer} 
    initial={true} > 
    <Scene key="Tabbar" 
      tabs={true} 
      initial={true} 
      tabBarStyle={styles.tabBar} 
      default="ProductExplorer"> 

     <Scene key="ProductExplorer" 
       title="Lists" 
       icon={TabIcon} 
       iconName={"list"} 
       initial={true} 
       leftButtonIconStyle={{tintColor: "#FFF"}} 
       renderBackButton={backButtonFunction} 
       component={ProductExplorer}/> 

     <Scene key="Profile" 
       title="Profile" 
       icon={TabIcon} 
       iconName={"gear"} 
       leftButtonIconStyle={{tintColor: "#FFF"}} 
       renderBackButton={backButtonFunction} 
       component={Profile}/> 
    </Scene> 

</Scene> 

、これが私のボタンレンダラー機能である：

引き出しコンポーネントに this link

に回答

let backButtonFunction = function() { 
    var TouchableElement = TouchableHighlight; 
    if (Platform.OS === 'android')TouchableElement = TouchableNativeFeedback; 
    return (
     <TouchableElement onPress={()=>{ 
      **** my problem is here **** what do you think i should do?!what function must be call here to toggle open and close menu? 
     }} style={{position : "absolute",left: 12,bottom:12}}> 
      <Icon style={{color: "#FFF"}} name={"bars"} size={23}/> 
     </TouchableElement> 
    ); 
}; 

Answer 1

：

class NavigationDrawer extends React.Component { 

    componentDidMount() { 
     Actions.refresh({key: 'drawer', ref: this.refs.navigation}); 
    } 

    render() { 
     const state = this.props.navigationState; 
     const children = state.children; 

     return (
      <Drawer 
       styles={drawerStyles} 
       ref="navigation" 
       type="displace" 
       // onOpen={() => Actions.refresh({ key: 'drawer', open: true })} 
       // onClose={() => Actions.refresh({ key: 'drawer', open: false })} 
       content={<TabView />} 
       tapToClose 
       openDrawerOffset={0.2} 
       panCloseMask={0.2} 
       negotiatePan 
       tweenHandler={(ratio) => ({ 
       main: { opacity: Math.max(0.54, 1 - ratio) } 
     })} 
      > 
       <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/> 
      </Drawer> 
     ); 
    } 
} 

カスタムボタン：

renderMenuButton() { 
    return (
     <TouchableOpacity onPress={() => {Actions.get('drawer').ref.toggle()}}> 
     <Icon name="ios-menu-outline" style={styles.navBarMenuIcon} /> 
     </TouchableOpacity> 
    ); 
    } 

、これが私のシーンです：

<Scene 
           key="drawer" 
           component={NavigationDrawer} 
           initial={true} 
          > 
/*another Scene*/ 
</Scene>