Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> 【React Native開發】React Native控件之DrawerLayoutAndroid抽屜導航切換組件講解(13)

【React Native開發】React Native控件之DrawerLayoutAndroid抽屜導航切換組件講解(13)

編輯:關於android開發

【React Native開發】React Native控件之DrawerLayoutAndroid抽屜導航切換組件講解(13)


(一)前言

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

剛創建的React Native技術交流群(282693535),歡迎各位大牛,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 = (
    
      I'm in the Drawer!
    
  );
  return (
    navigationView}>
      
        Hello
        World!
      
    
   );
  }
}
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.onDrawerClosefunction 方法 當導航視圖被關閉後進行回調該方法

    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 = (
          
            我是導航功能欄標題
            1.功能1
            2.功能2
          
        );
        return (
          navigationView}>
            
              我是主布局內容
            
          
         );
        }
      }
      const styles =StyleSheet.create({
      });
      AppRegistry.registerComponent('DrawerLayoutDemo',() => DrawerLayoutDemo);

      運行效果截圖:

      \

      (五)最後總結

      今天我們主要學習一下DrawerLayoutAndroid抽屜導航視圖切換的介紹以及使用方法。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved