前端之家收集整理的这篇文章主要介绍了
React Native自定义控件【底部抽屉菜单】,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的View。关于自定义View的内容网上已经有很多的博文,本篇博客要和大家分享如何在ReactNative中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必是不言而喻的,那么RN中如何实现这种效果呢?
reactNative 系统库中只提供了iOS的实现,即ActionSheetIOS.该控件的显示方式有两种实现:
(1)showActionSheetWithOptions
(2)showShareActionSheetWithOptions
第一种是在ios设备上显示一个ActionSheet弹出框。第二种实现是在iOS设备上显示一个分享弹出框。借用官方的图片说明如下:
ios设备上的实现系统已经提供了,接下来我们就需要如何适配Android。在原生开发中,自定义View也是有基本的流程:
(1)自定义控件类,继承View或系统控件。
(2)自定义属性
(3)获取自定义属性,并初始化一系列工具类
(4)重写onMeasure方法,对控件进行测量
(5)如果是自定义布局,还需要重写onLayout进行布局
在React Native中自定义组件的思路基本和原生自定义相似。所以按照这个流程,我们一步步实现即可。
1、自定义组件,实现Component
- @H_301_62@exportdefaultclassAndroidActionSheetextendsComponent
2、自定义属性
@H_301_62@//1.声明所需要的属性
staticpropTypes@H_301_62@={
title:React.PropTypes.string,//标题
content:React.PropTypes.object,//内容
show:React.PropTypes.func,//显示
hide:React.PropTypes.func,//隐藏
}
@H_301_62@constructor(props){
super(props);
this.translateY@H_301_62@=150@H_301_62@;
this.state@H_301_62@={
visible:false,
sheetAnim:newAnimated.Value(this.translateY)
}
this.cancel@H_301_62@=this@H_301_62@.cancel.bind(this);
}
3、实现基本布局
@H_301_62@/**
*Modal为最外层,ScrollView为内容层
*/
render(){
const{visible,sheetAnim}=this.state;
return(
<Modal@H_301_62@
visible@H_301_62@={visible}
transparent@H_301_62@={true}
animationType@H_301_62@="none"@H_301_62@
onRequestClose@H_301_62@={this.cancel}
>@H_301_62@
View@H_301_62@style@H_301_62@={styles.wrapper}>@H_301_62@
TouchableOpacity@H_301_62@style@H_301_62@={styles.overlay}onPress@H_301_62@={this.cancel}></TouchableOpacityAnimated.View@H_301_62@
style@H_301_62@={[styles.bd,{height:this.translateY,transform:[{translateY:sheetAnim}]}]} {this._renderTitle()}
ScrollView@H_301_62@
horizontal@H_301_62@={true}
showsHorizontalScrollIndicator@H_301_62@={false} {this._renderContainer()}
ScrollViewAnimated.ViewViewModal )
可以看到上面我们定义了基本的布局,布局中使用_renderTitle()方法来渲染标题部分,内容区域为ScrollView,并且为横向滚动,即当菜单项超过屏幕宽度时,可以横向滑动选择。在内部调用了renderContainer方法来渲染菜单:
*标题
_renderTitle(){
const{title,titleStyle}=this.props;
if(!title){
returnnull
}
//确定传入的是不是一个ReactElement,防止渲染的时候出错
if(React.isValidElement(title)){
return(
View@H_301_62@style@H_301_62@={styles.title}>@H_301_62@{title} )
Text@H_301_62@style@H_301_62@={[styles.titleText,titleStyle]}Text
/**
*内容布局
*/
_renderContainer(){
const{content}=this.props;
View@H_301_62@style@H_301_62@={styles.container} {content}
}
当我们需要点击Modal,进行关闭时,还需要处理关闭操作,Modal并没有为我们提供外部关闭处理,所以需要我们单独实现,从布局代码中我们看到TouchableOpacity作为遮罩层,并添加了单机事件,调用cancel来处理:
*控制Modal点击关闭,Android返回键关闭
cancel(){
this.hide();
4、自定义方法,对外调用
在外部我们需要控制控件的显示和隐藏,所以需要对外公开显示、关闭的方法:
*显示
show(){
this.setState({visible:true})
Animated.timing(this.state.sheetAnim,{
toValue:0,248);line-height:18px;list-style-position:outside !important;"> duration:250
}).start();
}
*隐藏
hide(){
this.setState({visible:false})
toValue:this.translateY,248);line-height:18px;list-style-position:outside !important;"> duration:150
5、使用
ActionSheet@H_
301_62@
ref@H_301_62@='sheet'@H_301_62@
title@H_301_62@='分享'@H_301_62@
content@H_301_62@={this._renderContent()}
/>@H_301_62@
至此,我们自定义组件就完成了。整体来看,基本的原理还是很简单的,主要利用了自定义属性,传参,动画,就可以轻松的实现了。本篇博客重点不是为了让大家知道怎么去写出这个效果,而是让大家明白,当我们遇到一个需要自定义的实现时,该如何去一步步实现。
三、效果图
近甚忙,趁晚色清静,闲暇之余,分享之。
源码下载
转自http://blog.csdn.NET/u013718120/article/details/73744581