轉載請標明出處：

(一)前言

      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 

      今天我們一起來看一下抽屜DrawerLayoutAndroid導航切換控制元件的講解與基本使用。

剛建立的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重複加群！歡迎各位大牛,React Native技術愛好者加入交流!同時部落格左側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!

該DrawerLayoutAndroid元件封裝了Android

(二)使用基本介紹

該控制元件用起來也還是相對比較簡單的，只要熟悉一下其中基本的屬性和方法即可，下面來看官方的一個例項:

/**
 * 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.renderNavigationViewfunction方法，該方法進行渲染一個導航抽屜的檢視(用於使用者從螢幕邊緣拖拽出來) 

(四)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)或者底下進行回覆一下。

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

     關注我的微博，可以獲得更多精彩內容