DrawerLayoutAndroid组件学习

在学习过程中，记录点点滴滴，防止以后忘记；
DrawerLayoutAndroid是Android上专有的组件，类似有android上的DrawerLayout布局，用来设置滑动抽屉的，了解一个组件先要学习其属性，才能灵活运用。

DrawerLayoutAndroid组件有如下属性：

drawerPosition指定抽屉从屏幕的那一侧划出
- 例：drawerPosition={DrawerLayoutAndroid.positions.Left}
drawerWidth 指定抽屉的宽度
- 例：drawerWidth={260}
renderNavigationView function此方法用于渲染一个可以从屏幕一边拖入的导航视图。
-例：renderNavigationView={() => navigationView}//navigationView是一个view
drawerLockMode 设置抽屉的锁定模式。有三种状态：
unlocked (默认值)，意味着此时抽屉可以响应打开和关闭的手势操作。
locked-closed，意味着此时抽屉将保持关闭，不可用手势打开。
locked-open，意味着此时抽屉将保持打开，不可用手势关闭。
- 例： drawerLockMode =‘locked-closed’
keyboardDismissMode
指定在滑动过程中是否隐藏软键盘。有如下取值：
1.none 默认值，在滑动过程中不隐藏软键盘
2.on-drag 在滑动开始时候，即隐藏软键盘`
-例：keyboardDismissMode=”on-drag”
onDrawerClose 当抽屉关闭时候，回调该方法
onDrawerOpen 当抽屉打开时候回调该方法
onDrawerSlide 当抽屉产生交互效果时候，回调该方法
onDrawerStateChanged 当抽屉的状态发生变化时，回调该方法
-例： onDrawerOpen={() => {
console.log(‘打开了’)
}} //每当导航视图（抽屉）被打开之后调用此回调函数。
onDrawerClose={() => {
console.log(‘关闭了’)
}} //每当导航视图（抽屉）被关闭之后调用此回调函数。
onDrawerSlide={() => console.log(“正在交互……”)} //每当导航视图（抽屉）产生交互的时候调用此回调函数。
onDrawerStateChanged={(state) => this._DrawerStateChanged(state)} //每当抽屉的状态变化时调用此回调函数。

代码块

class ChatScreen3 extends React.Component {
   //无论抽屉处于那种状态，都仍然可以调用openDrawer/closeDrawer这两个方法打开和关闭。
    openDrawer(){
        this.refs.drawerLayout.openDrawer()
    }
    closeDrawer() {
        this.refs.drawerLayout.closeDrawer()
    }
    _DrawerStateChanged(_state) {
        console.log(_state);
        if (_state == 'Dragging') {
            console.log("拖拽中")
        }
    }
    render() {
        var navigationView = (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <Text style={{margin: 20, fontSize: 20,backgroundColor: "red", textAlign: 'left'}}>First drawer</Text>
                <Text style={{margin: 20, fontSize: 20,backgroundColor: "blue", textAlign: 'left'}}>Second drawer</Text>
            </View >);
        return (
            <DrawerLayoutAndroid
                ref={'drawerLayout'}//官方demo上没有这句，会出错
                drawerWidth={260} //抽屉组件的宽度
                drawerPosition={DrawerLayoutAndroid.positions.Left}  //指定弹出的方向
                // 通过renderNavigationView方法渲染一个抽屉组件，其内容就是显示主视图
                onDrawerOpen={() => {
                    console.log('打开了')
                }}
                onDrawerClose={() => {
                    console.log('关闭了')
                }}            //每当导航视图（抽屉）被关闭之后调用此回调函数。
                onDrawerSlide={() => console.log("正在交互......")}    //每当导航视图（抽屉）产生交互的时候调用此回调函数。
                onDrawerStateChanged={(state) => this._DrawerStateChanged(state)} //每当抽屉的状态变化时调用此回调函数。
                renderNavigationView={() => navigationView}>
                <View style={{flex: 1, alignItems: 'center'}}>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
                    <TouchableHighlight
                        style={styles.toolbar}
                        underlayColor='#FFFFFF'//设置点击背景色属性
                        onPress={() => this.openDrawer()}>
                        <Text>Button</Text>
                    </TouchableHighlight>
                </View>
            </DrawerLayoutAndroid>
        );
    }
}