基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解
时间:2022-04-26
本文章向大家介绍基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解,主要内容包括DrawerLayoutAndroid 属性、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);
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Go 常见并发模式实现(二):通过缓冲通道实现共享资源池
- 在 Linux 终端中查找域名 IP 地址的命令(五种方法)
- Laravel 表单方法伪造与 CSRF 攻击防护
- Java图形验证码支持gif、中文、算术等
- Go 常见并发模式实现(三):通过无缓冲通道创建协程池
- Linux下安装SVN服务端的方法步骤
- SSM项目频繁打成war包部署,使用tomcat和maven实现热部署配置
- Laravel 视图使用入门
- 基于 Go 协程实现图片马赛克应用(上):同步版本
- Blade 模板引擎入门篇
- 基于 Go 协程实现图片马赛克应用(下):并发重构
- Python入门教程笔记(三)数组
- Greenplum集群Master与Standby相互切换
- Java基础知识三问—百度真题
- 访问权限导致toString返回空BUG分享