轉載請標明出處:
[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)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)