mysql抽屉图标_React Native自定义组件实现抽屉菜单控件效果
一、需求分析
原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的View。关于自定义View的内容网上已经有很多的博文,本篇博客要和大家分享如何在React Native中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必是不言而喻的,那么RN中如何实现这种效果呢?本文主要和大家介绍了React Native自定义控件底部抽屉菜单的示例。
React Native 系统库中只提供了IOS的实现,即ActionSheetIOS.该控件的显示方式有两种实现:
(1)showActionSheetWithOptions
(2)showShareActionSheetWithOptions
第一种是在iOS设备上显示一个ActionSheet弹出框。第二种实现是在iOS设备上显示一个分享弹出框。借用官方的图片说明如下:
IOS设备上的实现系统已经提供了,接下来我们就需要如何适配Android。在原生开发中,自定义View也是有基本的流程:
(1)自定义控件类,继承View或系统控件。
(2)自定义属性
(3)获取自定义属性,并初始化一系列工具类
(4)重写onMeasure方法,对控件进行测量
(5)如果是自定义布局,还需要重写onLayout进行布局
在React Native中自定义组件的思路基本和原生自定义相似。所以按照这个流程,我们一步步实现即可。
二、功能实现
1、自定义组件,实现Componentexport default class AndroidActionSheet extends Component
2、自定义属性// 1.声明所需要的属性
static propTypes= {
title: React.PropTypes.string, // 标题
content: React.PropTypes.object, // 内容
show: React.PropTypes.func, // 显示
hide: React.PropTypes.func, // 隐藏
}constructor(props) {
super(props);
this.translateY = 150;
this.state = {
visible: false,
sheetAnim: new Animated.Value(this.translateY)
}
this.cancel = this.cancel.bind(this);
}
3、实现基本布局/**
* Modal为最外层,ScrollView为内容层
*/
render() {
const { visible, sheetAnim } = this.state;
return(
visible={ visible }
transparent={ true }
animationType="none"
onRequestClose={ this.cancel }
>
style={[styles.bd, {height: this.translateY, transform: [{translateY: sheetAnim}]}]}>
{ this._renderTitle() }
horizontal={ true }
showsHorizontalScrollIndicator={ false }>
{this._renderContainer()}
)
}
可以看到上面我们定义了基本的布局,布局中使用_renderTitle()方法来渲染标题部分,内容区域为ScrollView,并且为横向滚动,即当菜单项超过屏幕宽度时,可以横向滑动选择。在内部调用了renderContainer方法来渲染菜单:/**
* 标题
*/
_renderTitle() {
const { title,titleStyle } = this.props;
if (!title) {
return null
}
// 确定传入的是不是一个React Element,防止渲染的时候出错
if (React.isValidElement(title)) {
return (
{title}
)
}
return (
{title}
)
}
/**
* 内容布局
*/
_renderContainer() {
const { content } = this.props;
return (
{ content }
)
}
当我们需要点击Modal,进行关闭时,还需要处理关闭操作,Modal并没有为我们提供外部关闭处理,所以需要我们单独实现,从布局代码中我们看到TouchableOpacity作为遮罩层,并添加了单机事件,调用cancel来处理:/**
* 控制Modal点击关闭,Android返回键关闭
*/
cancel() {
this.hide();
}
4、自定义方法,对外调用
在外部我们需要控制控件的显示和隐藏,所以需要对外公开显示、关闭的方法:/**
* 显示
*/
show() {
this.setState({visible: true})
Animated.timing(this.state.sheetAnim, {
toValue: 0,
duration: 250
}).start();
}/**
* 隐藏
*/
hide() {
this.setState({ visible: false })
Animated.timing(this.state.sheetAnim, {
toValue: this.translateY,
duration: 150
}).start();
}
5、使用
ref='sheet'
title='分享'
content={this._renderContent()}
/>
至此,我们自定义组件就完成了。整体来看,基本的原理还是很简单的,主要利用了自定义属性,传参,动画,就可以轻松的实现了。本篇博客重点不是为了让大家知道怎么去写出这个效果,而是让大家明白,当我们遇到一个需要自定义的实现时,该如何去一步步实现。
三、效果图
相关推荐:
mysql抽屉图标_React Native自定义组件实现抽屉菜单控件效果相关推荐
- android自定义组件属性,Android组合控件详解 自定义属性
组合控件详解 & 自定义属性 组合控件是自定义控件的一种,只不过它是由其他几个原生控件组合而成,故名组合控件. 在实际项目中,GUI 会遇到一些可以提取出来做成自定义控件情况. 一个自定义控件 ...
- Android自定义组件——3D立体旋转控件
BingoIdea 一个3D立体切换的自定义ViewGroup demo,支持横向和纵向滑动翻转. 项目配置 在项目的build.gradle配置 allprojects {repositories ...
- Qt 实现 QQ 9.0版 自定义菜单控件
#简述 重新最近开始了QQ最新版 9.0 界面的模仿,前几天搞了一个QQ登陆界面的动画效果详情见 QQ 9.0 新版登录窗口登录特效 ,今晚Qt技术学习班分享了QQ 9.0版本的自定义菜单控件,通过Q ...
- vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
- 第31讲 UI组件之 Gallery画廊控件
第31讲 UI组件之 Gallery画廊控件 1.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery只 ...
- WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探
原文:WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探 最近因为项目需要,开始学习如何使用WPF开发桌面程序.使用WPF一段时间之后,感觉WPF的开发思 ...
- 组件、插件、控件的区别
控件:是编程中用到的,按钮就算是一个控件,窗口也是等等 组件:是软件的一部分.软件的组成部分. 插件:网页中用到的,flash插件,没有它浏览器不能播放flash. 首先范围最广的应该是组件,英文co ...
- android lrc 歌词view,自定义View强势来袭,用自定义View实现歌词显示控件下篇之自定义LyricView的实现...
在上篇中,我与大家分享了关于如何进行*.lrc歌词文件的解析,以及将解析完成后的歌词展示在镶嵌在ScrollView中的TextView上,就这样而言,一个简单的歌词显示功能也就实现了. 但是,如何才 ...
- 力控报警转储 mysql_力控组态软件后台组件报警中心的控件方法
力控组态软件ForceControl V7.0后台组件报警中心的控件方法 AckGroup(int nGroup) 描述: 确认组报警 返回值: int(0 失败,1 成功 ) 参数: nGroup ...
最新文章
- Windows 服务器操作系统安全设置加固方法
- 协防差_西班牙男篮的投篮比美国还差 为什么在2019年世界杯夺冠
- 卡特兰数(Catalan number)
- 开启Thread线程只执行一次
- IOS 其他 - 在真机调试的时候,将NSLog日志存入文件并保存到document目录
- 王者荣耀连接不上服务器最新赛季排名,王者荣耀新赛季连掉三段 初期不能打排位是有原因的...
- spring-aop相关概念
- 为什么不用mysql做数据仓库hdfs_为什么不建议将RAID用于Hadoop HDFS设置?
- 如何制作圆角布局..?
- java重构三部曲,建构·解构·重构——漫谈批注式阅读三部曲
- AutoCAD自带CAD Express Tools实现停车位自动编序号
- flash builder4.6安装
- 企业微信第三方服务商应用开发及上架教程
- Protel DXP 使用教程 - 自定义集成库
- Ubuntu下可以使用的微信
- 书到用时方恨少,一大波JS开发工具函数来了
- Java 打印 Excel 表格
- XML配置文件的读取
- 基于Bert论文构建Question-Answering模型
- 在本计算机无法启动用友通服务器,用友T3客户端提示用友通服务没有启动?
热门文章
- 【前端】VUE UI的安装
- [MySQL] 2059 - Authentication plugin ‘caching_sha2_password‘ cannot be loaded dlope
- 【Clickhouse】Clickhouse Live View
- 【缓存】缓存,这么用才真正达到缓存的效果
- Spring : ImportBeanDefinitionRegistrar动态注入
- Spring : Spring Aop 获取增强(通知)
- Spring源码:ApplicationContextInitializer
- 24-java版Spark程序读取ElasticSearch数据
- 分享一个入门级实操项目,思路非常棒!
- 不懂就问,Spring 是如何判定原型循环依赖和构造方法循环依赖的?