React Native Android 独有组件之 Drawe

封装了 Android 平台DrawerLayout的 React 组件。抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且 DrawerLayoutAndroid 的直接子视图会成为主视图（用于放置内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。

属性

名称	类型	必填	说明
renderNavigationView	function	是	被拉入的导航视图的内容。
onDrawerClose	function	否	导航视图被关闭后的回调函数。
drawerPosition	enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)	否	设置导航视图从屏幕的哪一边拉入。
drawerWidth	number	否	设置导航视图从窗口边缘拉入的视图的宽度。
keyboardDismissMode	enum('none', 'on-drag')	否	设置拖动过程中是否隐藏软键盘
drawerLockMode	enum('unlocked', 'locked-closed', 'locked-open')	否	设置导航视图的锁定模式。
onDrawerOpen	function	否	导航视图被打开后的回调函数。
onDrawerSlide	function	否	导航视图发生交互时的回调函数。
onDrawerStateChanged	function	否	导航视图的状态发生变化时的回调函数。
drawerBackgroundColor	string	否	设置导航视图的背景颜色。
statusBarBackgroundColor	string	否	使抽屉占满整个屏幕，并设置状态栏颜色使导航视图占满整个屏幕

方法

• openDrawer()
  打开导航视图。

• closeDrawer()
  关闭导航视图。

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  DrawerLayoutAndroid,
  TouchableOpacity,
  View,
  Image,
  Text
} from 'react-native';

export default class App extends Component {
  
  render() {
    var navigationView = (
      <View style={styles.container}>
        <View style={styles.nav_top_view}>
          <Image
            style={styles.headImg}
            source = {
              require('./img/cat.png')
            }
          />
          <Text
            style={styles.draw_title}>duoduo_1101</Text>
        </View>
        <TouchableOpacity
          onPress={this.close}
        >
          <View style={styles.nav_item_view}>
            <Image
              style={styles.itemImg}
              source = {
                require('./img/cat.png')
              }
            />
            <Text
              style={styles.item_text}>首页</Text>
          </View>
        </TouchableOpacity>
        <View style={styles.nav_item_view}>
          <Image
            style = {
              styles.itemImg
            }
            source = {
              require('./img/cat.png')
            }
          />
          <Text
            style={styles.item_text}>礼物</Text>
        </View>
        <View style={styles.nav_item_view}>
          <Image
            style = {
              styles.itemImg
            }
            source={require('./img/cat.png')}
          />
          <Text
            style={styles.item_text}>设置</Text>
        </View>
      </View>
    );
    return (
    <DrawerLayoutAndroid
        ref={(drawer) => { this.drawer = drawer; }}
        drawerWidth={260}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView}>
        <View style={styles.container}>
             <View style={styles.title_view}>
             <TouchableOpacity
              onPress={this.open}
            >
            <Image 
           style={styles.title_left_icon}
           source = {
             require('./img/cat.png')
           }
        />
          </TouchableOpacity>
         <Text style={styles.title_text}>
              duoduo_1101
         </Text>
           <Text style={styles.title_text}>
               更多
         </Text>
             </View>
        </View>
      </DrawerLayoutAndroid>
    )
  }

  open = () => {
    this.drawer.openDrawer();
  }
  close = () => {
    this.drawer.closeDrawer();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'white'
  },

  nav_top_view: {
      flexDirection: 'column',
      height: 150,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#27b5ee',
    },
    nav_item_view: {
      flexDirection: 'row',
      height: 50,
      paddingLeft: 30,
      paddingTop: 6,
      paddingBottom: 6,
      alignItems: 'center',
      backgroundColor: '#FFFFFF',
    },
    title_view: {
      flexDirection: 'row',
      height: 50,
      paddingLeft: 15,
      paddingRight: 15,
      justifyContent: 'space-between',
      alignItems: 'center',
      backgroundColor: '#27b5ee',
    },
    title_text: {
      color: 'white',
      fontSize: 18,
      textAlign: 'center'
  },
  headImg: {
    width: 50,
    height: 50
  },

  itemImg: {
    width: 20,
    height: 20
  },

  draw_title: {
    marginTop: 10,
    fontSize: 16,
    color: 'white'
  },
  item_text: {
    fontSize: 14,
    color: 'grey',
    marginLeft: 10
  },
  title_left_icon: {
    height: 30,
    width:30
  }

});

2. 效果图

drawer.jpg