React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解13(3/3)

本篇文章主要介绍了"React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解13"，主要涉及到方面的内容，对于移动开发感兴趣的同学可以参考一下： 转载请标明出处：http://blog.csdn.net/developer_jiangqq/article/details/50599951本文出自:【江清清...

       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 = (
    
      我是导航功能栏标题
      1.功能1
      2.功能2
    
  );
  return (
    navigationView}>
      
        我是主布局内容
      
    
   );
  }
}
const styles =StyleSheet.create({
});
AppRegistry.registerComponent('DrawerLayoutDemo',() => DrawerLayoutDemo);

运行效果截图:

(五)最后总结

          今天我们主要学习一下DrawerLayoutAndroid抽屉导航视图切换的介绍以及使用方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

         尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

       关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

     关注我的微博，可以获得更多精彩内容

      

以上就介绍了React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解13，包括了方面的内容，希望对移动开发有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_307599_3.html