一、需求分析
原生开发中，自定义view可谓是屡见不鲜的事情，往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的view。关于自定义view的内容网上已经有很多的博文，本篇博客要和大家分享如何在react native中自定义组件实现抽屉菜单控件效果。分享功能在app中的重要性想必是不言而喻的，那么rn中如何实现这种效果呢？
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、自定义组件，实现component
export 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(
<modal
visible={ visible }
transparent={ true }
animationtype="none"
onrequestclose={ this.cancel }
>
<view style={ styles.wrapper }>
<touchableopacity style={styles.overlay} onpress={this.cancel}></touchableopacity>
<animated.view
style={[styles.bd, {height: this.translatey, transform: [{translatey: sheetanim}]}]}>
{ this._rendertitle() }
<scrollview
horizontal={ true }
showshorizontalscrollindicator={ false }>
{this._rendercontainer()}
</scrollview>
</animated.view>
</view>
</modal>
)
}
可以看到上面我们定义了基本的布局，布局中使用_rendertitle()方法来渲染标题部分，内容区域为scrollview，并且为横向滚动，即当菜单项超过屏幕宽度时，可以横向滑动选择。在内部调用了rendercontainer方法来渲染菜单：
/**
* 标题
*/
_rendertitle() {
const { title,titlestyle } = this.props;
if (!title) {
return null
}
// 确定传入的是不是一个react element，防止渲染的时候出错
if (react.isvalidelement(title)) {
return (
<view style={styles.title}>{title}</view>
)
}
return (
<text style={[styles.titletext,titlestyle]}>{title}</text>
)
}
/**
* 内容布局
*/
_rendercontainer() {
const { content } = this.props;
return (
<view style={styles.container}>
{ content }
</view>
)
}
当我们需要点击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、使用
<actionsheet
ref='sheet'
title='分享'
content={this._rendercontent()}
/>
至此，我们自定义组件就完成了。整体来看，基本的原理还是很简单的，主要利用了自定义属性，传参，动画，就可以轻松的实现了。本篇博客重点不是为了让大家知道怎么去写出这个效果，而是让大家明白，当我们遇到一个需要自定义的实现时，该如何去一步步实现。
三、效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vue源码实战render.js与$nextTick的异步调用
网友评论