react-native中抽屜的使用（react-native-drawer）

前一階段，在項目中用到了抽屜，以前在Android中自己喜歡寫一點，實在不行可以查到第三方的庫（Sliding如果沒記錯！）。現在，用react-native 來開發，當然，第一反應還是去github找第三方成熟的組件。奇怪，也找到了！這就是下面我要寫的react-native-drawer的應用。既然是別人寫的，我們只需要弄懂怎麼用就可以了，下面就來講一下怎麼使用的。

第一步：安裝第三方的組件
npm install –save react-native-drawer

第二步：將組件引入到頁面中
import Drawer from ‘react-native-drawer’

這個時候，這個Drawer這個組件就可以像我們自己寫的組件來用了。先來看一段代碼。

render() {
        let content = (<View><Text>我是抽屜功能</Text></View>);
        return (
            <View style={{flex: 1}}>
                <TouchableHighlight 
                onPress={this._onPress.bind(this)}>
                    <Text>這是一個登錄界面(點擊進入)</Text>
                </TouchableHighlight>
                <Drawer
                    type='displace'
                    content={<DrawerScreen bg={'red'}/>}
                    tapToClose={true}
                    panOpenMask={0.2}
                    openDrawerOffset={0.2} // 20% gap on the right side of drawer
                    panCloseMask={0.2}
                    closedDrawerOffset={0}
                    styles={drawerStyles}
                    tweenHandler={(ratio) => ({main: { opacity:(2-ratio)/2 }})}>
                    <DrawerScreen bg={'blue'}/>
                </Drawer>
            </View>
        )


const drawerStyles = {
    drawer: { shadowColor: '#0000ff', shadowOpacity: 0.8, shadowRadius: 3},
    main: {paddingLeft: 0},
}

具體針對上述代碼進行介紹：
1.type:一共是3種（displace,overlay,static）,
displace就是抽屜左邊進來，右邊出去；

overlay就是覆蓋，左邊拉過來的直接蓋在右邊；

static就是左邊位置不動，左邊的慢慢顯示，就是跟拉開窗戶看風景是的，其實風景並沒有動，只是我們看到是區域變大了。

2.content是顯示的內容，也就是抽屜界面中顯示的視圖

3.tapToClose是在抽屜顯示的時候，點擊右邊的底層視圖，抽屜會自動關閉

4.open：true表示抽屜打開，false表示抽屜關閉

5.openDrawerOffset 抽屜打開時，佔頻幕寬度的百分比

6.closedDrawerOffset 抽屜關閉之後留在頻幕中的百分比

7.disabled 是否開啓開關

8.tweenHandler 這個函數的值是（0-1），主要用於控制隨着拉動想要伴隨的動畫效果

9.acceptDoubleTag響應區域雙擊可以打開抽屜

10.acceptTap響應區域單擊可以打開抽屜

11.panOpenMask拉開抽屜的響應區域

12.panCloseMask最右邊的頻幕寬度比例範圍內爲關閉響應區域

13.initializeOpen 默認是否是開着