@H_502_9@@H_502_9@

转载请标明出处：@H_502_9@@H_502_9@

http://www.jb51.cc/article/p-ubzgpnua-bgy.html
@H_502_9@@H_502_9@

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

(@H_502_9@一@H_502_9@)@H_502_9@前言@H_502_9@@H_502_9@

今天我们一起来看一下抽屉@H_502_9@DrawerLayoutAndroid@H_502_9@导航切换控件的讲解与基本使用。@H_502_9@

@H_502_9@刚创建的@H_502_9@React Native@H_502_9@技术交流群@H_502_9@(@H_502_9@282693535@H_502_9@),@H_502_9@欢迎各位大牛@H_502_9@,@H_502_9@React@H_502_9@ Native@H_502_9@技术爱好者加入交流@H_502_9@!@H_502_9@同时博客左侧欢迎微信扫描关注订阅号@H_502_9@,@H_502_9@移动技术干货@H_502_9@,@H_502_9@精彩文章技术推送@H_502_9@!@H_502_9@

@H_502_9@该@H_502_9@DrawerLayoutAndroid@H_502_9@组件封装了@H_502_9@Android@H_502_9@平台的@H_502_9@DrawerLayout@H_502_9@控件@H_502_9@(@H_502_9@只限定与@H_502_9@Android@H_502_9@平台@H_502_9@)@H_502_9@。该抽屉页面@H_502_9@(@H_502_9@经常用于导航页面@H_502_9@)@H_502_9@是通过@H_502_9@renderNavigationVie@H_502_9@w@H_502_9@进行渲染的。该Draw@H_502_9@erLayoutAndroid@H_502_9@的中的子视图会变成主视图@H_502_9@(@H_502_9@主要用于放置内容@H_502_9@)@H_502_9@。我们知道导航菜单中。导航栏的视图在屏幕中一开始是隐藏的，但是我们可以通过@H_502_9@drawerPostition@H_502_9@指定位置进行把导航视图拖拽出来，最终拖拽出来的距离大小可以使用@H_502_9@drawerWidth@H_502_9@属性进行指定。@H_502_9@

(@H_502_9@二@H_502_9@)@H_502_9@使用基本介绍@H_502_9@@H_502_9@

@H_502_9@该控件用起来也还是相对比较简单的，只要熟悉一下其中基本的属性和方法即可，下面来看官方的一个实例@H_502_9@:@H_502_9@

/**
 * 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,textAlign: 'right'}}>Hello</Text>
        <Text style={{margin: 10,textAlign: 'right'}}>World!</Text>
      </View>
    </DrawerLayoutAndroid>
   );
  }
}
const styles =StyleSheet.create({
});
AppRegistry.registerComponent('DrawerLayoutDemo',() => DrawerLayoutDemo);

运行效果如下@H_502_9@:@H_502_9@

(@H_502_9@三@H_502_9@)@H_502_9@使用基本介绍@H_502_9@@H_502_9@

3.1.View@H_502_9@的属性使用@H_502_9@ @H_502_9@继承了@H_502_9@View@H_502_9@控件的属性信息@H_502_9@(@H_502_9@例如@H_502_9@:@H_502_9@宽和高@H_502_9@,@H_502_9@背景颜色@H_502_9@,@H_502_9@边距等相关属性样式@H_502_9@)@H_502_9@

3.2.@H_502_9@dr@H_502_9@awerPosition @H_502_9@参数为枚举类型@H_502_9@(@H_502_9@DrawerConsts.DrawerPosition.Left,DrawerConsts.DrawerPosition.Right@H_502_9@)@H_502_9@

@H_502_9@进行指定导航菜单用那一侧进行滑动出来，根据官方实例最终传入的两个枚举值分别@H_502_9@@H_502_9@为@H_502_9@:@H_502_9@DrawerLayoutAndroid.positions.Left@H_502_9@和@H_502_9@DrawerLayoutAndroid.positions.Righ@H_502_9@t@H_502_9@

3.3.@H_502_9@drawerWidth@H_502_9@ @H_502_9@进行指定导航菜单视图的宽度，也就是说该侧面导航视图可以从屏幕边缘拖拽到屏幕的宽度距离@H_502_9@

3.4.@H_502_9@keyboardDismissMode@H_502_9@@H_502_9@参数为枚举类型@H_502_9@('none','on-drag') @H_502_9@进行指定在导航视图拖拽的过程中是否要隐藏键盘@H_502_9@

• n@H_502_9@one (@H_502_9@@H_404_300@默认值@H_502_9@),@H_502_9@@H_404_300@默认不会隐藏键盘@H_502_9@
• on-drag @H_502_9@@H_404_300@当拖拽开始的时候进行隐藏键盘@H_502_9@ @H_502_9@

3.5.@H_502_9@onDrawerClose@H_502_9@function @H_502_9@方法@H_502_9@ @H_502_9@当导航视图被关闭后进行回调该方法@H_502_9@

3.6.onDrawerOpen function @H_502_9@方法@H_502_9@ @H_502_9@当导航视图被打开后进行回调该方法@H_502_9@

3.7.@H_502_9@on@H_502_9@DrawerSlide function @H_502_9@方法@H_502_9@ @H_502_9@当导航视图和用户进行交互的时候调用该方法@H_502_9@

3.8.onDrawerStateChanged function@H_502_9@方法，该当导航视图的状态发生变化的时候调用该方法。该状态会有以下三种状态@H_502_9@

• idle (@H_502_9@空闲@H_502_9@) @H_502_9@表示导航视图上面没有任何交互状态@H_502_9@
• dragging (@H_502_9@正在拖拽中@H_502_9@) @H_502_9@@H_404_300@表示用户正在和导航视图产生交互动作@H_502_9@
• settling (@H_502_9@暂停@H_502_9@-@H_502_9@刚刚结束@H_502_9@) @H_502_9@@H_404_300@表示用户@H_502_9@ @H_502_9@@H_404_300@刚刚结束和导航视图的交互动作，当前导航视图正在打开或者关闭拖拽滑动动画效果@H_502_9@

3.9.@H_502_9@renderNavigationView@H_502_9@ @H_502_9@function@H_502_9@ @H_502_9@方法，该方法进行渲染一个导航抽屉的视图@H_502_9@(@H_502_9@用于用户从屏幕边缘拖拽出来@H_502_9@)@H_502_9@

(@H_502_9@四@H_502_9@)DrawerLayoutAndro@H_502_9@id@H_502_9@使用实例@H_502_9@@H_502_9@

@H_502_9@具体基本使用实例代码如下@H_502_9@:@H_502_9@

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React,backgroundColor:'blue'}}>
      <Text style={{margin:10,color:'#fff',fontSize: 15,textAlign: 'center'}}>我是导航功能栏标题</Text>
      <Textstyle={{marginTop: 10,marginLeft:20,textAlign:'left'}}>1.功能1</Text>
      <Textstyle={{marginTop: 10,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,textAlign: 'right'}}>我是主布局内容</Text>
      </View>
    </DrawerLayoutAndroid>
   );
  }
}
const styles =StyleSheet.create({
});
AppRegistry.registerComponent('DrawerLayoutDemo',() => DrawerLayoutDemo);

运行效果截图@H_502_9@:@H_502_9@

(@H_502_9@五@H_502_9@)@H_502_9@最后总结@H_502_9@@H_502_9@

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

@H_502_9@

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

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

@H_502_9@

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

@H_502_9@