一、需求分析
原生开发中,自定义view可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的View。关于自定义view的内容网上已经有很多的博文,本篇博客要和大家分享如何在React Native中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必是不言而喻的,那么RN中如何实现这种效果呢?
React Native 系统库中只提供了IOS的实现,即ActionSheetIOS.该控件的显示方式有两种实现:
(1)showActionSheetWithOptions
(2)showShareActionSheetWithOptions
第一种是在iOS设备上显示一个ActionSheet弹出框。第二种实现是在iOS设备上显示一个分享弹出框。借用官方的图片说明如下:
IOS设备上的实现系统已经提供了,接下来我们就需要如何适配Android。在原生开发中,自定义view也是有基本的流程:
(1)自定义控件类,继承View或系统控件。
(4)重写onMeasure方法,对控件进行测量
(5)如果是自定义布局,还需要重写onLayout进行布局
在React Native中自定义组件的思路基本和原生自定义相似。所以按照这个流程,我们一步步实现即可。
二、功能实现
1、自定义组件,实现Component
2、自定义属性
3、实现基本布局
可以看到上面我们定义了基本的布局,布局中使用_renderTitle()方法来渲染标题部分,内容区域为ScrollView,并且为横向滚动,即当菜单项超过屏幕宽度时,可以横向滑动选择。在内部调用了renderContainer方法来渲染菜单:
/**
- 内容布局
*/
_renderContainer() {
const { content } = this.props;
return ({ content } ) }
当我们需要点击Modal,进行关闭时,还需要处理关闭操作,Modal并没有为我们提供外部关闭处理,所以需要我们单独实现,从布局代码中我们看到TouchableOpacity作为遮罩层,并添加了单机事件,调用cancel来处理:
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、使用
至此,我们自定义组件就完成了。整体来看,基本的原理还是很简单的,主要利用了自定义属性,传参,动画,就可以轻松的实现了。本篇博客重点不是为了让大家知道怎么去写出这个效果,而是让大家明白,当我们遇到一个需要自定义的实现时,该如何去一步步实现。
三、效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/33769.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。