基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。

DrawerLayoutAndroid 是通过 renderNavigationView 方法渲染的,并且它的直接子视图是放置内容的主视图。我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。

DrawerLayoutAndroid 属性

  • drawerBackgroundColor color 设置抽屉导航的背景色。默认值是白色。如果你想设置抽屉的透明度,使用RGBA。 比如:return ( <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)"> </DrawerLayoutAndroid> );
  • drawerLockMode enum('unlocked', 'locked-closed', 'locked-open') 抽屉导航的三种锁定模式:
    • locked-closed,意思是此时抽屉将保持关闭,不可用手势打开。
    • locked-open,意思是此时抽屉将保持打开,不可用手势关闭。 记住:无论抽屉处于那种状态,我们都可以调用openDrawer/closeDrawer这 两个方法打开和关闭。
    • unlocked (默认值),意思是此时抽屉可以响应打开和关闭的手势操作。
  • drawerPosition left 和right 设置抽屉导航菜单从哪一侧进行滑动出来,根据共有两个枚举值分别 为:DrawerLayoutAndroid.positions.Left和DrawerLayoutAndroid.positions.Right
  • drawerWidth number 指定抽屉的宽度,即从窗口的边缘拉到视图中的更精确的宽度
  • keyboardDismissMode 枚举类型('none','on-drag') none默认值,默认不会隐藏键盘,on-drag:是当拖拽开始的时候隐藏键盘
  • onDrawerClose func 每当导航视图被关闭时调用的函数
  • onDrawerOpen func 当导航视图被打开后调用该方法
  • onDrawerSlide func 每当导航视图(抽屉)产生交互相互作用的时候调用此回调函数
  • onDrawerStateChanged func 每当抽屉的状态变化时调用此回调函数。抽屉可以有3种状态:
    • dle(空闲),表示现在导航条上没有任何正在进行的交互。
    • dragging(拖拽中),表示用户正在与导航条进行交互。
    • settling(停靠中),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。
  • renderNavigationView 该方法用于渲染一个可以从屏幕一边拖入的导航视图
  • statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕,并绘制状态栏的背景,使其能够在覆盖到状态栏。它将只对API 21以上的效果

DrawerLayoutAndroid 方法

  • openDrawer(0) 打开抽屉导航
  • closeDrawer(0) 关闭抽屉导航

实例演示

还是老样子,看代码前,我们先看看效果图,只有看直观的效果图才能够引起你们的注意,引起你们的兴趣。那就一起来看看吧。

实例代码

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

export default class DrawerLayoutDemo extends Component {

  render() {
    var navigationView = (
    <View style={styles.container}>
      <View style={styles.nav_top_view}>
        <Image 
           style={{width: 50, height: 50}}
           source={require('./img/head.jpg')}
        />
        <Text
          style={{marginTop:10,fontSize:16,color:'white'}}>非著名程序员</Text>
      </View>
       <TouchableOpacity
              onPress={this.close}
            >
      <View style={styles.nav_item_view}>
      <Image 
           style={{width: 20, height: 20}}
           source={require('./img/nav_icon_home.png')}
        />
        <Text
          style={{fontSize:14,color:'grey',marginLeft:10}}>首页</Text>
      </View>
      </TouchableOpacity>
      <View style={styles.nav_item_view}>
      <Image 
           style={{width: 20, height: 20}}
           source={require('./img/nav_icon_gift.png')}
        />
        <Text
          style={{fontSize:14,color:'grey',marginLeft:10}}>礼物</Text>
      </View>
      <View style={styles.nav_item_view}>
      <Image 
           style={{width: 20, height: 20}}
           source={require('./img/nav_icon_settings.png')}
        />
        <Text
          style={{fontSize:14,color:'grey',marginLeft:10}}>设置</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={{width: 30, height: 30}}
           source={require('./img/menu_icon.png')}
        />
          </TouchableOpacity>
         <Text style={styles.title_text}>
               非著名程序员
         </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: '#FFFFFF',
  },
  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'
  },
});

AppRegistry.registerComponent('DrawerLayoutDemo', () => DrawerLayoutDemo);

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-12-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏谦谦君子修罗刀

storyboard中改变TabBar的字体颜色

一、用storyboard建立的Tab bar,不能改变它的字体颜色。 如果用storyboard建立TabBarController,那么想要选择Bar T...

3389
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

37011
来自专栏PPV课数据科学社区

【工具】一个投行工作十年MM的Excel操作大全

>移动到当前数据区域的边缘:CTRL+ 箭头键 移动到行首:HOME 移动到工作表的开头:CTRL+HOME 移动到工作表的最后一个单元格。:CTRL+END ...

2874
来自专栏每日一篇技术文章

weex-28-自定义AR组件

1202
来自专栏向治洪

React Native的Navigator详解

前言 之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中io...

20810
来自专栏向治洪

React Native的Navigator详解

前言 之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中ios/...

20710
来自专栏前端学习心得

Vue2.0父子组件间通信

1716
来自专栏青玉伏案

IOS开发之自动布局显示网络请求内容

  在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的...

1916
来自专栏iOS开发日记

iOS开发系列——Storyboard

到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器(对应一个设计文件),其实在...

3434
来自专栏听雨堂

JQuery笔记(二) animate支持的属性

以常见的图片切换效果对animate的动画做了实验,用了两种方式,一种是修改相对位置,一个是修改背景的位置,结果第一种可以,第二种失败。 <!DOCTYPE h...

21510

扫码关注云+社区

领取腾讯云代金券