DrawerLayoutAndroid如何通过点击事件打开

按照已知的文档的示例走发现，"抽屉"只能通过左右滑动打开,那么如何通过点击事件打开"抽屉呢"，这里需要用到ref，ref属性的介绍：https://facebook.github.io/react/docs/more-about-refs-zh-CN.html

'use strict';
import React, {
AppRegistry,
View,
Component,
Text,
DrawerLayoutAndroid,
Alert,
StyleSheet,
Image,
ToolbarAndroid,
ScrollView,
PixelRatio,
} from 'react-native';

class App extends Component {

constructor() {
super();
this.state = {

}
}

showDrawer() {
return(
<View style={styles.center}>
<Text style={styles.center_title}>我是导航栏功能标题</Text>
<Text style={styles.center_item}>1、功能1</Text>
<Text style={styles.center_item}>2、功能2</Text>
</View>
);
}

printProps() {
console.log(this.props.title);
}

render() {
var toolbarActions =[
{title: 'Create', icon:require('./images/kb-logo.png'), show: 'always'},
{title: 'Filter'},
{title: 'Settings', icon:require('./images/kb-logo.png'), show: 'always'},
];
return(

<DrawerLayoutAndroid
ref={(drawer) => { this.drawer = drawer; }}
drawerWidth={200}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={this.showDrawer}>
<View style={styles.flex}>
<ToolbarAndroid
actions={toolbarActions}
navIcon={require('./images/kb-logo.png')}
style={styles.toolbar}
subtitle="副标题"
title="主标题"
onIconClicked={() => this.drawer.openDrawer()}
>
</ToolbarAndroid>
<ScrollView style={styles.flex}>
<Text style={styles.index_title}>我是主布局内容</Text>
<Image source={require('./images/6.jpg')} style={styles._img}/>
<Image source={require('./images/7.jpg')} style={styles._img}/>
<Image source={require('./images/8.jpg')} style={styles._img}/>
<Image source={require('./images/9.jpg')} style={styles._img}/>
</ScrollView>
</View>
</DrawerLayoutAndroid>
);
}

}

const styles = StyleSheet.create({

flex: {
flex: 1,
},

_img: {
width: 699/PixelRatio.get(),
height: 723/PixelRatio.get(),
borderWidth: 1,
borderColor: 'tan',
margin:5,
},

toolbar: {
backgroundColor: '#e9eaed',
height: 56,
},
center: {
flex: 1,
backgroundColor: 'green',
},

center_title: {
margin: 10,
color: '#fff',
textAlign: 'center',
fontSize: 15,
},

center_item: {
marginTop: 10,
marginLeft: 20,
color: '#fff',
textAlign: 'left',
fontSize: 15,
},

index: {
flex: 1,
alignItems: 'center',
},

index_title: {
margin: 10,
fontSize: 15,
textAlign: 'right',
}

});

AppRegistry.registerComponent('learn', () => App);