轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50599951](http://blog.csdn.net/developer_jiangqq/article/details/50599951) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ??【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)???? ? ? ? 今天我們一起來看一下抽屜DrawerLayoutAndroid導航切換控件的講解與基本使用。 ? ? ? ??剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ?????????該DrawerLayoutAndroid組件封裝了Android平臺的DrawerLayout控件(只限定與Android平臺)。該抽屜頁面(經常用于導航頁面)是通過renderNavigationView進行渲染的。該DrawerLayoutAndroid的中的子視圖會變成主視圖(主要用于放置內容)。我們知道導航菜單中。導航欄的視圖在屏幕中一開始是隱藏的，但是我們可以通過drawerPostition指定位置進行把導航視圖拖拽出來，最終拖拽出來的距離大小可以使用drawerWidth屬性進行指定。 # (二)使用基本介紹 ??????????該控件用起來也還是相對比較簡單的，只要熟悉一下其中基本的屬性和方法即可，下面來看官方的一個實例: ~~~ /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, DrawerLayoutAndroid, } from'react-native'; class DrawerLayoutDemo extends Component { render() { var navigationView = ( <View style={{flex: 1, backgroundColor:'#fff'}}> <Text style={{margin: 10, fontSize:15, textAlign: 'left'}}>I'm in the Drawer!</Text> </View> ); return ( <DrawerLayoutAndroid drawerWidth={300} drawerPosition={DrawerLayoutAndroid.positions.Left} 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> </View> </DrawerLayoutAndroid> ); } } const styles =StyleSheet.create({ }); AppRegistry.registerComponent('DrawerLayoutDemo',() => DrawerLayoutDemo); ~~~ 運行效果如下:  # (三)使用基本介紹 ?????? 3.1.View的屬性使用??繼承了View控件的屬性信息(例如:寬和高,背景顏色,邊距等相關屬性樣式) ?????? 3.2.drawerPosition???參數為枚舉類型(DrawerConsts.DrawerPosition.Left,DrawerConsts.DrawerPosition.Right) ??????????????進行指定導航菜單用那一側進行滑動出來，根據官方實例最終傳入的兩個枚舉值分別???為:DrawerLayoutAndroid.positions.Left和DrawerLayoutAndroid.positions.Right ?????? 3.3.drawerWidth??進行指定導航菜單視圖的寬度，也就是說該側面導航視圖可以從屏幕邊緣拖拽到屏幕的寬度距離 ?????? 3.4.keyboardDismissMode???參數為枚舉類型('none','on-drag')?進行指定在導航視圖拖拽的過程中是否要隱藏鍵盤 * none?? (默認值),默認不會隱藏鍵盤 * on-drag??當拖拽開始的時候進行隱藏鍵盤????????????????? ?????? 3.5.onDrawerClose??function?方法?當導航視圖被關閉后進行回調該方法 ?????? 3.6.onDrawerOpen?? function?方法?當導航視圖被打開后進行回調該方法 ?????? 3.7.onDrawerSlide? function??方法??當導航視圖和用戶進行交互的時候調用該方法 ??????3.8.onDrawerStateChanged function方法，該當導航視圖的狀態發生變化的時候調用該方法。該狀態會有以下三種狀態 * idle (空閑)?表示導航視圖上面沒有任何交互狀態 * dragging (正在拖拽中)???表示用戶正在和導航視圖產生交互動作 * settling (暫停-剛剛結束)??表示用戶?剛剛結束和導航視圖的交互動作，當前導航視圖正在打開或者關閉拖拽滑動動畫效果 ???? 3.9.renderNavigationView??function?方法，該方法進行渲染一個導航抽屜的視圖(用于用戶從屏幕邊緣拖拽出來)? # (四)DrawerLayoutAndroid使用實例 ??????具體基本使用實例代碼如下: ~~~ /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, DrawerLayoutAndroid, } from'react-native'; class DrawerLayoutDemo extends Component { render() { var navigationView = ( <View style={{flex: 1, backgroundColor:'blue'}}> <Text style={{margin:10,color:'#fff',fontSize: 15, textAlign: 'center'}}>我是導航功能欄標題</Text> <Textstyle={{marginTop: 10,marginLeft:20,color:'#fff',fontSize: 15, textAlign:'left'}}>1.功能1</Text> <Textstyle={{marginTop: 10,marginLeft:20,color:'#fff',fontSize: 15, textAlign:'left'}}>2.功能2</Text> </View> ); return ( <DrawerLayoutAndroid drawerWidth={150} drawerPosition={DrawerLayoutAndroid.positions.left} renderNavigationView={() =>navigationView}> <View style={{flex: 1, alignItems:'center'}}> <Textstyle={{margin: 10, fontSize: 15, textAlign: 'right'}}>我是主布局內容</Text> </View> </DrawerLayoutAndroid> ); } } const styles =StyleSheet.create({ }); AppRegistry.registerComponent('DrawerLayoutDemo',() => DrawerLayoutDemo); ~~~ 運行效果截圖:  # (五)最后總結 ??????????今天我們主要學習一下DrawerLayoutAndroid抽屜導航視圖切換的介紹以及使用方法。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)