轉載請標明出處：

http://blog.csdn.net/developer_jiangqq/article/details/50599951

本文出自:【江清清的博客】

(一)前言

? ? ? 【好消息】個人站點已經上線執行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏: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 (<DrawerLayoutAndroiddrawerWidth={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 (<DrawerLayoutAndroiddrawerWidth={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） 侵權必究！

? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)

? ? ?關注我的微博，能夠獲得很多其它精彩內容

? ? ??

轉載于:https://www.cnblogs.com/brucemengbm/p/7253586.html

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。