在场景中使用自定义图标时如何打开抽屉 [英] How to open Drawer When use a custom icon in Scene

问题描述

我使用 Drawer 我的应用程序，我的问题是我想在 Drawer Scene 中使用自定义图标并且可以，但我没有看到任何文档告诉我如何打开或关闭抽屉！

I using Drawer my app, my problem is i want use a custom icon in Drawer Scene and its ok but I dont see any docs to tell me how to open or close the drawer!

这是我的路由器:

<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>

这是我的按钮渲染器功能:

and this is my button renderer function :

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

推荐答案

已在 此链接

在抽屉组件中:

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>

这篇关于在场景中使用自定义图标时如何打开抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！