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

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

转载请标明出处：

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

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

(一)前言

       今天我们一起来看一下抽屉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);

运行效果如下: